babel-loader
: 负责es6语法转化babel-preset-env
: 包含es6、7等版本的语法转化规则babel-polyfill
: es6内置方法和函数转化垫片。(如Generator、Set、Map、Array.from等) (babel-loader只转化语法)babel-plugin-transform-runtime
: 避免polyfill污染全局变量
注 babel-loader
和babel-polyfill
。前者负责语法转化,比如:箭头函数;后者负责内置方法和函数,比如:new Set()
。
- polyfill引入:https://www.babeljs.cn/docs/usage/polyfill/
- babel-preset-env配置:https://www.babeljs.cn/docs/plugins/preset-env/
版本问题和过滤
- 如果使用
babel-loader@8
以上的版本,需要安装@babel/core @babel/preset-env @babel/polyfill @babel/runtime -S @babel/plugin-transform-runtime -D
来替代bable-core babel-preset-env bable-polyfill babel-runtime -S babel-plugin-transform-runtime -D
。 rule.exclude
属性值可以是正则也可以是字符串。 如果是字符串,则该字符串必须为绝对路径,该绝对路径代表的目录被排除在外,例如exlude: path.resolve(_dirname, 'node_modules')
,会排除__dirname/node_modules/
这个目录下的所有文件。 如果是正则,则只要路径里的一部分匹配正则表达式,则该目录就被排除在外,例如exlude: /node_modules/
会排除__dirname/node_modules/
以及__dirname/src/another_node_modules/
目录中的所有文件。
Babel Polyfill
- 全局垫片
- 为应用准备
npm install babel-polyfill --save
import "babel-polyfill"
Babel Runtime Transform
- 局部垫片
- 为开发框架准备
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
- .babelrc
安装 npm i babel-loder
(已经是8以上) npm i @babel/core
指定语法 npm i @babel/preset-env
打包
编译 函数和方法
npm i babel-polyfill babel-runtime -S
npm i babel-plugin-transform-runtime -D
如果使用
babel-loader@8
以上的版本npm i @babel/runtime -S
和npm i @babel/plugin-transform-runtime -D
.babelrc文件
{
"presets": [
[
"@babel/preset-env",
{
"targets": { //根据targets 指定哪些语法编译,哪些语法不编译
"browsers": ["last 2 versions"],
// "chrome": "52" //chrome支持大部分ES6语法
}
}
]
],
"plugins": ["@babel/transform-runtime"]
}