Webpack与Babel配置详解及优化策略

babel是一个Javascript编译器，是前端开辟中的一个利器。它突破了阅读器完成es规范的限定，使我们在开辟中能够运用最新的Javascript语法。

经由过程构建和babel，能够运用最新js语法举行开辟，末了自动编译成用于阅读器或node环境的代码。

webpack中运用babel

合营webpack运用babel前，须要起首运用npm init初始化一个项目，npm install -g webpack装置webpack（全局装置是为了在敕令行运用webpack敕令）。

• 装置babel-loader, babel-core, babel-preset-env。

npm install --save-dev babel-loader babel-core babel-preset-env
个中，babel-preset-env插件是为了通知babel只编译同意的内容，相当于babel-preset-es2015, es2016, es2017及最新版本。经由过程它能够运用最新的js语法。

• 设置webpack.config.js

在webpack设置文件中设置bable-loader

module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env',{
targets: {
browsers: ['> 1%', 'last 2 versions']
}
}]
]
}
},
exclude: '/node_modules/'
}
]
}

个中，exclude是定义不愿望babel处置惩罚的文件。targets是presets的一些预设选项，这里示意将js用于阅读器，只确保占比大于1%的阅读器的特征，主流阅读器的最新两个主版本。
更多与设置有关的信息，能够参考：
babel env preset设置,
browserlist预设置.

• 在敕令行中运转响应webpack敕令即可。
• 因为babel-preset设置选项较多，我们平常能够在根目录下竖立.babelrc文件，特地用来安排babel preset设置，这是一个json文件。能够将上述设置修正以下：

//.bablerc文件
{
"presets": [
['env',{
"targets": {
"browsers": ['> 1%', 'last 2 versions']
}
}]
]
}
//原webpack.config.js文件
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: '/node_modules/'
}
]
}

babel-polifill插件

在上面的babel设置中，babel只是将一些es6，es7-8的语法转换成相符目的的js代码，然则假如我们运用一些特征或要领，比方Generator, Set, 或许一些要领。babel并不能转换为低版本阅读器识别的代码。这时候就须要babel-polifill。

简朴的说，polifill就是一个垫片，供应了一些低版本es规范对高等特征的完成。运用polifill的要领以下：

npm install --save babel-polifill

然后在运用进口引入polifill，要确保它在任何其他代码/依靠声明前被挪用。

//CommonJS module
require('babel-polyfill');
//es module
import 'babel-polifill';

在webpack.config.js中，将babel-polifill到场entry数组中：

entry: ["babel-polifill", "./app.js"]

比拟于runtime-transform，polifill用于运用开辟中。会增加响应变量到全局，所以会污染全局变量。

更多细节参考babel-polifill。

runtime-transform插件

runtime transform也是一个插件，它与polifill有些相似，但它不污染全局变量，所以常常用于框架开辟。

装置：
npm install --save-dev babel-plugin-transform-runtime

npm install --save babel-runtime

用法：
将下面内容增加到.bablerc文件中

{
"plugins": ["transform-runtime"]
}

更多细节参考bable-runtime-transform插件。