一、说明
webpack,默认只能处理一部分ES6新语法,一些更高级处理不了(ES2015+的语法)。
需要借助第三方loader来帮忙处理成低级点的语法,再把结果交给webpack打包编译处理。
通过Babel可以帮助处理ES6+高级语法。
二、安装
-
npm install -D babel-loader
,安装babel-loader。安装完成会提示需要安装对应版本的babel-core。
-
根据提示安装对应版本的babel-core。
npm i @babel/core@^7.0.0 -D
(7.x可以直接npm i @babel/core -D
),babel 的 node API 已经被移到 babel-core。 -
npm i @babel/preset-env -D
,提供语法转换对应关系(转换字典)。babel有几种规则都可以实现对ES6语法的转码,官方现已建议采用babel-preset-env。 -
可能会报错:
这是因为 babel 的版本冲突,babel-loader 8.x对应babel 7.x以此类推。
三、配置
1、增加匹配规则
webpack.config.js中增加匹配规则:
module.exports = {
module:{
rules:[
{
test:/\.js$/, //匹配JS文件
use:'babel-loader',
exclude:/node_modules/ //排除node_modules目录
}
]
}
}
需要排除node_modules目录,此目录下都是现成的包(已打包编译过),重新打包耗资源、运行项目报错。
2、Babel配置文件
- 在项目根路径下创建名为 .babelrc 的Babel配置文件(规范的JSON格式,无注释、字符串必须双引号等等),配置规则。
plugins插件;presets预设、语法。
{
"presets": ["@babel/env"]
}
- 也可以在package.json中配置。
"babel":{
"presets": ["@babel/env"]
}
网友评论