1.首先安装编译es6的包
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
2.编写配置文件
module.exports={
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:8].js'
},
module:{
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
['@babel/preset-env',
{
targets:{
browsers:['> 1%','last 2 versions']
//chrome:'52'
//设置浏览器支持
}
}]
]
}
},
exclude:'/node_modules/'
//不编译的文件夹,为了提高编译效率
}
]
}
}
3.关于es6的兼容
在步骤二中,在编译js的规则里有这个“preset-env”的配置项。它的作用是对ES6的一些语法做兼容,确保浏览器能正常解析代码。
但是preset-env也只能兼容一下语法方面,但是新增的函数方法却无能为力
这个时候就需要用到了Babel Polyfill
1,Babel Polyfill :
特点:全局垫片
为开发应用准备
会污染全局,这个包其实就是对ES6新增的函数的一个实现,并把函数挂载到全局环境中
如何使用:
npm install babel-polyfill --save
然后在app.js里引入
import 'babel-polyfill'
接下来就可以 正常使用es6的方法了
2.Babel Runtime Transform
特点:局部垫片
为开发框架准备
如何使用:
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
新建.babelrc文件配置
{
"presets":[
["@babel/preset-env",{
"targets":{
"browsers":["> 1%","last 2 versions"]
}
}]
],
"plugins":["@babel/transform-runtime"]
}
webpack.config.js:
module.exports={
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:8].js'
},
module:{
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader'
},
exclude:'/node_modules/'
}
]
}
}