babel-loader7.x
一定要与babel6.x
他们两个版本结合用
babel-loader8.x
一定要与babel7.x
他们两个版本结合用
1、babel-loader7.x 与 babel6.x 版本配置
如果你的
babel-loader7.x
的版本,一定要与babel6.x
的版本结合用
例子:
- 首先单独指定安装
babel-loader7.x
,运行cnpm i babel-loader@7.0.0 -D
- 然后安装你所用的,这里是我的例子:
cnpm i babel-core babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
安装能够识别转换 JSX 语法的包:
cnpm i babel-preset-react -D
- 添加
.babelrc
配置文件,并配置{ "presets":["env","stage-0","react"], "plugins":["transform-runtime"] }
- 在
webpack.config.js
配置文件,添加babel-loader
配置项module: {//所有第三方模块的匹配规则 rules: [//第三方匹配规则 // exclude 一定要排除这个文件 { test: /\.js|jsx$/, use: "babel-loader", exclude: /node_modules/ },//千万不能忘记添加 exclude排除项 ] }
到这里就是配完babel-loader7.x
与 babel6.x
版本的包了,然后删除node_modules
文件,重新下载所有的包和插件,运行 cnpm i
,再次运行项目就OK了!
2、babel-loader8.x 与 babel7.x 版本配置
注: 一定要注意,
babel7.x
版本跟之前的差别非常大,在 版本7.x 中,废弃了 stage-0 ,而且命令也进行了很大改动,如果安装了 babel6.x 版本,可以先卸载,或者直接进行如下安装,例子:
- 运行 :
cnpm i @babel/core -D
cnpm i babel-loader -D
cnpm i @babel/preset-env
cnpm i @babel/preset-react -D
cnpm i @babel/plugin-transform-runtime -D
注: 这里我是一步步安装,你也可以一块安装!!! - 在你的
.babelrc
文件中进行如下配置{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "@babel/plugin-transform-runtime" ] }
到这里配置完了,把node_modules
文件删除,然后重新下载所有安装的包和插件,运行 cnpm i
,然后运行项目就OK了!!!