babel環境安裝與編譯

来源:https://www.cnblogs.com/chenyingying0/archive/2020/01/19/12215349.html
-Advertisement-
Play Games

babel:將瀏覽器不支持的ES6語法轉為javascript 查看node是否安裝: npm -v node -v 實例演示:在桌面新建part5目錄在cmd命令行中 cd desktop cd part5 安裝babel:初始化package.json文件:描述當前項目信息,包括依賴等 npm ...


babel:將瀏覽器不支持的ES6語法轉為javascript

查看node是否安裝:

    npm -v
    node -v

實例演示:
在桌面新建part5目錄
在cmd命令行中

    cd desktop
    cd part5

安裝babel:
初始化package.json文件:描述當前項目信息,包括依賴等

    npm init

安裝babel cli

    npm install --save-dev babel-cli

在package.json的"script"下添加一句:

    "build": "babel entry.js"

創建entry.js文件,寫es6代碼用於測試

執行

npm run build

全局安裝babel-cli

    npm i babel-cli -g

安裝babel-preset-env

    npm i -D babel-preset-env

創建配置文件,告訴babel用什麼規則來編譯文件.babelrc

{
    "presets": [
        [                
            "env",
            {
                "targets":{
                    "browsers":["last 1 version"]
                }
            }
        ]
    ]
}

修改packsge.json
-o 輸出到文件
-w 始終處於監聽狀態

"build": "babel entry.js -o index.js -w"

通過babel插件體驗新特性
安裝插件

npm i -D babel-plugin-transform-class-properties

修改.babelrc文件

{
    "presets": [
        [                
            "env",
            {
                "targets":{
                    "browsers":["last 1 version"]
                }
            }
        ]
    ],
    "plugins":["transform-class-properties"]
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於非同步消息,大家都知道,如下: 這些用起來都是比較複雜的,RabbitMQ先要創建Exchange,在創建Queue,還要將Queue和Exchange通過某種規則綁定起來。發消息之前要指定routing-Key,還要控制頭部信息。 即使你只需要一組消息者。那麼你就要經歷上面繁瑣的過程。 但是Re ...
  • 準備工作 因為在編譯時需要下載許多依賴包,在執行編譯前最好先配置下代理倉庫 編譯flink shaded 因為flink依賴flink shaded工程,基本的依賴項都是在這個工程裡面定義的,所以要先編譯這個工程 1. 下載flink shaded工程 "flink shaded" 1. 在寫文章時 ...
  • 在Vue進行前端開發中,表單的輸入是基礎且常見的功能,本文以一個簡單的小例子,簡述v-model數據綁定的用法,僅供學習分享使用,如有不足,還請指正。 ...
  • 插槽 1. 具名插槽 自 2.6.0 起有所更新。已廢棄的使用 attribute 的語法 但是我們有了新的語法,如下: 子組件 childCom: 父組件 app: 效果圖: 註意: 只能添加在 上 2. 作用域插槽 有時讓插槽內容能夠訪問子組件中才有的數據是很有用的。但是由於子組件的作用域在子組 ...
  • 自定義組件 1. 自定義組件的v model 首先我們先說一下在自定義組件中使用v model的必要條件 在自定義的組件中要有input(這裡我們先不討論單選覆選框) 在自定義組件的模板對象中要有props屬性,且裡面要含有一個value 在自定義組件的input標簽上要綁定value屬性值為pro ...
  • Prop 1. Prop驗證 javascript Vue.component('my component', { props: { // 基礎的類型檢查 ( 和 會通過任何類型驗證) propA: Number, // 多個可能的類型 propB: [String, Number], // 必填的 ...
  • 效果圖 註:值是根據原生select中的值來動態獲取併進行分類 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" ...
  • 這個環境比較簡單 搭建 TypeScript 開發環境 什麼是 compiler? less 編譯器: EcmaScript 6 編譯器: TypeScript 編譯器: 一句話:把 TypeScript 轉換為 JavaScript ,瀏覽器就具有運行了 線上測試編譯環境 compiler "線上 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...