babel環境安裝及簡單使用步驟

Babel 是一個 JavaScript 編譯器   https://www.babeljs.cn/

1. babel是基於nodeJS的，先安裝nodeJS，安裝步驟自行百度，傻瓜式安裝

2. 新建一個項目目錄，進入項目目錄並初始化

 npm init -y

3. 通過以下命令本地安裝babel cli　（命令行工具）

npm install --save-dev babel-cli         (--save是項目內安裝,不是全局安裝  -dev是開發時環境，開發時需要依賴，正式上線時不需要依賴的)
npm i -D babel-cli                       ( 簡寫方式，效果同上 ）

4.進入項目目錄，根目錄新建entry.js，並打開package.json，添加 "build":"babel entry.js" , 這樣執行npm run build 就可以編譯entry.js文件的。

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"babel entry.js"    //插入此行代碼
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0"
  }
}

5. 制定轉換規則，需要另外一個包，安裝 babel-preset-env

npm i -D babel-preset-env

6. 根目錄新建 .babelrc 文件 ，env是我們安裝的插件，targets里是配置的兼容到瀏覽器的最新版本。

{

    "presets": [

        [

            "env",

            {

                "targets": {

                    "browsers": [ "last 1 version" ]

                }

            }

        ]

    ]

}

7. 執行npm run build 在命令行就可以看到編譯后的結果，需要將編譯后的結果存儲到一個文件中，在package.json修改build命令,執行build命令就會有一個index.js文件了。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel entry.js -o index.js"
  },

8. 每次手動編譯比較麻煩，還可以在命令后添加 -w 自動編譯，在執行npm run build，程序會掛起自動監聽文件是否發生改變。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel entry.js -o index.js -w"                    -w  就是watch的意思
  },

9.ES6部分語法可能在編譯的時候會報錯，可以安裝另外一個插件

npm i -D babel-plugin-transform-class-properties        //babel插件 轉換 類 屬性 ... 命令太長方便記憶

10. 安裝這個插件后，要記得在 .babelrc文件里添加配置，否則沒用

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

 

這些大致就是babel的簡單使用，后續繼續補充......