前端工程化之webpack中配置babel-loader（四）

安裝

• 安裝：npm i -D babel-core babel-loader babel-plugin-transform-runtime
• 安裝：npm i -D babel-preset-es2015 babel-preset-stage-0
• 安裝：npm i -S babel-runtime

說明：

babel-core

把 js 代碼分析成 ast (抽象語法樹, 是源代碼的抽象語法結構的樹狀表現形式)，方便各個插件分析語法進行相應的處理。有些新語法在低版本 js 中是不存在的，如箭頭函數，rest 參數，函數默認值等，這種語言層面的不兼容只能經過將代碼轉爲 ast，再經過語法轉換器分析其語法後轉爲低版本 js。

babel-preset-*

babel-plugin-* 表明了一系列的轉碼插件 
有了 babel-plugin 系列，能夠按需配置本身想要的特性，如果想搭個 es6 環境，一個個地配置各個插件，我猜你會瘋掉。babel-preset 系列就能夠知足咱們的需求，babel-preset 系列打包了一組插件，相似於餐廳的套餐。如 babel-preset-es2015 打包了 es6 的特性，babel-preset-stage-0 打包處於 strawman 階段的語法

babel-runtime

babel-runtime 在代碼中中直接引入 helper 函數，意味着不能共享，形成最終打包出來的文件裏有不少重複的 helper 代碼。因此，babel 又開發了 babel-plugin-transform-runtime，這個模塊會將咱們的代碼重寫，如將 Promise 重寫成 _Promise（只是打比方），而後引入_Promise helper 函數。這樣就避免了重複打包代碼和手動引入模塊的痛苦。

使用

第一步

/* webpack.config.js */

module: {
  rules: [
    // exclude 排除，不須要編譯的目錄，提升編譯速度
    {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
  ]
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

第二步

在項目根目錄中新建.babelrc配置文件

// 未來babel-loader運行的時候，會檢查這個配置文件，並讀取相關的語法和插件配置
{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"]
}

• 1
• 2
• 3
• 4
• 5

babel-polyfill 和 transform-runtime

做用：

實現瀏覽器對不支持API的兼容（兼容舊環境、填補）

安裝

• 命令： npm i -S babel-polyfill
• 命令：npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime

區別：

polyfill 污染全局環境、支持實例方法 
runtime 不污染全局環境、不支持實例方法

-* 表明了一系列的轉碼插件 
有了 babel-plugin 系列，能夠按需配置本身想要的特性，如果想搭個 es6 環境，一個個地配置各個插件，我猜你會瘋掉。babel-preset 系列就能夠知足咱們的需求，babel-preset 系列打包了一組插件，相似於餐廳的套餐。如 babel-preset-es2015 打包了 es6 的特性，babel-preset-stage-0 打包處於 strawman 階段的語法

babel-runtime

babel-runtime 在代碼中中直接引入 helper 函數，意味着不能共享，形成最終打包出來的文件裏有不少重複的 helper 代碼。因此，babel 又開發了 babel-plugin-transform-runtime，這個模塊會將咱們的代碼重寫，如將 Promise 重寫成 _Promise（只是打比方），而後引入_Promise helper 函數。這樣就避免了重複打包代碼和手動引入模塊的痛苦。

使用

第一步

/* webpack.config.js */

module: {
  rules: [
    // exclude 排除，不須要編譯的目錄，提升編譯速度
    {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
  ]
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

第二步

在項目根目錄中新建.babelrc配置文件

// 未來babel-loader運行的時候，會檢查這個配置文件，並讀取相關的語法和插件配置
{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"]
}

• 1
• 2
• 3
• 4
• 5

babel-polyfill 和 transform-runtime

做用：

實現瀏覽器對不支持API的兼容（兼容舊環境、填補）

安裝

• 命令： npm i -S babel-polyfill
• 命令：npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime

區別：

polyfill 污染全局環境、支持實例方法 runtime 不污染全局環境、不支持實例方法