前端工程化之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 不污染全局环境、不支持实例方法