與babel的"孽緣"

北宸南蓁發表於2018-08-04
Babel

babel是什麼鬼

Babel is a JavaScript compiler
babel主要的職責就是將一些前沿時髦的JS特性通過"翻譯"用到老舊的‘宿主’環境裡。(瀏覽器，Node等)

babel的正確開啟方式

babel-cli

利用babel命令列工具來進行對應的檔案進行"翻譯"。

npm install --save-dev babel-cli 
複製程式碼

可以在CLI中直接將指定的檔案進行編譯。

babel script.js
複製程式碼

.babelrc

.babelrc又是什麼東東

如果一個專案中需要用到babel打包工具，此時.babelrc就是存放在專案根目錄下的babel的配置檔案。 這種方式用於前端專案自己維護webpack/webpackDevServer。(這個檔案是為前端伺服器使用的)
e.g.
webpack配置檔案中獲取babel的配置資訊。（下面的配置檔案有省略）

// 引入babel檔案，對react專案進行執行時監測
var babelrc = fs.readFileSync('./.babelrc');
module.exports = {
devtool：{},
context:{},
entry:{},
output:{},
 module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelrc),]}]
      }

複製程式碼

package.json

在對應的專案的package.json的babel中指定對應的babel配置資訊。

"babel": {
    "presets": [
      "react-app"
    ]
  },

複製程式碼

配置規格和.babelrc是一樣的

常用引數

env

使用env來對指定的環境配置轉碼規格。

{
  "env": {
   "development": {
      "plugins": [
        "typecheck",
        ["react-transform", {
            "transforms": [{
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }
            ]
        }]
      ]
    }，
    "production": {  
        "plugins": ["transform-react-constant-elements"]
    }
  }
}
複製程式碼

該引數一般都是指定類似於catch-errors這類的plugins。

變數的使用

該變數會被WebpackDevServer的配置檔案獲取，從而根據production或者development來定義WebpackDevServer的行為。

presets

presets用來定義轉碼規則。

"presets": ["react", "es2015", "stage-0"]
複製程式碼

或者按照官方的推薦的一種一勞永逸的方法

npm install babel-preset-env --save-dev
//.babelrc中配置
{
  "presets": ["env"]
}
複製程式碼

Without any configuration options, babel-preset-env behaves exactly the same as babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 together).

有時候需要根據宿主環境的不同，來決定是否採用轉碼。所以需要額外的指定target

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
        //這裡也可以指定Node的資訊
        //"node": "6.10"
      }
    }]
  ]
}
複製程式碼

plugins

來配置一些外掛用於babel的transform階段來使用。 所以在plugins中常見得plugins都是帶transform字首的。

"plugins": [
        "transform-runtime",
        "transform-class-properties",
        "syntax-object-rest-spread"
    ]
複製程式碼

這裡需要額外的提示一下transform-runtime。在定義公共庫的時候，很有用。

babel的底層知識

Babel在轉碼的過程中也會存在"生命週期"。parsing/transforming/generation。 或者說編譯器都存在這個三個週期。 如何實現一個編譯器瞭解一下

相關文章