【webpack】安装babel的踩坑之旅

介绍

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。下面介绍在webpack项目下安装babel。如要知道构建webpack项目的步骤，请转《构建webpack项目》。

安装

其中babel/preset-env相当于 es2015 ，es2016 ，es2017 及最新版本。

 npm install -D babel-loader @babel/core @babel/preset-env webpack

如要使用Promises等，还需要引入Babel的 polyfill。（注意是–save）

npm install --save babel-polyfill

tips：
1、如果安装过程中出现了npm WARN checkPermissions Missing write access to这样的错误，有可能是因为权限问题/node/npm版本问题，本人尝试了删掉原本的node_modules文件，再以管理员身份运行cmd，然后重新cnpm install，然后再重新执行安装babel-loader等的命令。

2、安装polyfill的时候出现这样的错误

npm ERR! Maximum call stack size exceeded

百度之后说是要更新npm版本，故执行npm install npm -g 或者cnpm install npm -g（要记住全局更新！如果使用cnpm要确保已经安装了淘宝镜像）。

配置.babelrc

根目录下创建.babelrc文件，基本的配置是

{
  "presets": [],
  "plugins": []
}

这里安装了@babel/preset-env，故这样配置。
"presets": ["env"]

添加配置文件

在config—>webpack.config.js文件下作出如下配置，相当于告诉webpack在打包的时候遇到js文件（忽略node_modules文件夹）则进行转换。

module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader'
        }]
 }

测试

在“src/index.js”文件下，写入es6语法的代码，如下

let [a, b, c] = [1, 2, 3];
console.log(`b:${b}`);

开启本地服务器后，打开localhost:8080可以看到控制台输出了“b:2”。

结语

至此，babel安装成功。

补充

1、报错 ↓

Error: Cannot find module ‘babel-preset-env’ from
‘E:\Web_projects\vue-example\demo’

• Did you mean “@babel/env”?

修改 ↓

//.babelrc
{
  "presets": ["@babel/env"],
  "plugins": []
}