Webpack4.x与babel7.x的配置
前言
昨天在学babel的配置的时候失败了,然后上网查了一下,是由于6.x版本和7.x版本的兼容问题。
因为我是装了好几遍都失败了,然后我就把node_modules删掉,直接重装了。
版本差异
6.x版本和7.x版本有一些不同
- 6.x版本都是babel-xx,但是7.x版本大都是@babel-xx
-
stage-x插件
在7.x中被废弃了
步骤
下载Babel的转换工具
- 下载
babel-loader
,注意,这个前面是没有@的
cnpm i babel-loader -D
- 下载
@babel-core
cnpm i @babel-core -D
- 下载
@babel/plugin-transform-runtime
cnpm i @babel/plugin-transform-runtime -D
下载Babel的语法,它提供了ES6到ES3的对应关系
- 下载
@babel/preset-env
,它包含了所有和es***相关的语法
cnpm i @babel/preset-env -D
在webpack.config.js
中添加新的配置规则
{test:/\.js$/,use:['babel-loader'],exclude:/node_modules/}//配置babel来转换高级的语法
注意:在配置babel的loader规则的时候,必须把node_modules目录,通过exclude选项排除掉:原因有俩:
- 如果不排除node_modules,则babel会把node_modules中所有的第三方JS文件都打包编译,这样会非常消耗cpu,同时,打包速度非常慢
- 哪怕最终Babel把所有node_modules中的JS转换完毕了,但是,项目也无法正常运行
配置
- 在项目的根目录中,新建一个叫做 .babelrc 的babel配置文件,这个配置文件属于json格式,所以在写 .babelrc 配置的时候,必须符合json规范:不能写注释,字符串必须用双引号
- 在 .babelrc 写如下的配置 :大家可以把preset翻译成[语法]的意思
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime",
]
}
但是由于我在main.js里面写了ES6的class语法,而stage-x插件已经废弃了,所以还是报了**Cannot find module ‘@babel/plugin-proposal-class-properties’**的错误,我们需要安装一些别的插件,来取代stage插件的功能。
ERROR in ./src/main.js
Module build failed (from ./node_modules/[email protected]@babel-lo
ader/lib/index.js):
Error: f
rom 'F:\WebstormProjects\webpack-study'
at Function.module.exports [as sync] (F:\WebstormProjects\webpack
-study\node_modules\[email protected]@resolve\lib\sync.js:58:15)
at resolveStandardizedName (F:\WebstormProjects\webpack-study\nod
e_modules\[email protected][email protected]@@babel\core\lib\config\files\plugins.js:
101:31)
于是我按照提示
cnpm i @babel/plugin-proposal-class-properties -D
又报错: Can’t resolve '@babel/runtime/helpers/classC
allCheck’
ERROR in ./src/main.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/classC
allCheck' in 'F:\WebstormProjects\webpack-study\src'
@ ./src/main.js 1:0-68 16:2-17
@ multi ./node_modules/[email protected]@webpack-dev-server/
client?http://localhost:8080 ./src/main.js
于是我按照提示
cnpm i @babel/runtime/helpers/class
CallCheck -D
但是下载失败了
Install fail! Error: [@@babel/runtime/helpers/classCallCheck] reso
lved target F:\WebstormProjects\webpack-study\@babel\runtime\helpers\
classCallCheck error: ENOENT: no such file or directory, lstat 'F:\We
bstormProjects\webpack-study\@babel'
查找资料后发现
cnpm i @babel/runtime -D
配置.babelrc
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties"
]
}
成功了!