webpack 中 babel 的配置
在日常开发中，如果在项目中使用ES6、ES7等高级语法进行开发，那么浏览器是无法识别的。这时候就需要使用 babel 进行语法的转化，将其转化为 ES5 的语法，提供浏览器识别。
babel的官网地址：https://www.babeljs.cn/
安装babel的说明
参考文献：https://www.cnblogs.com/guolao/archive/2019/07/25/11244758.html
官网安装说明：https://www.babeljs.cn/setup#installation
Babel 提供了各种组件的安装方式，在这里我们选择 webpack 的安装方式。
选择 webpack 之后，则会显示对应组件的安装方式，下面我们按照官网提供的方式来安装一下。
不过在此之前，先来初始化一个webpack的构建文件结构。
构建webpack的文件结构
初始化 package.json 文件
package.json 使用存储记录 npm 安装相关包版本即可的。执行以下命令进行初始化：
npm init -y
执行如下：
安装webpack
安装webpack工具至本地项目中：
npm i -D webpack webpack-cli
执行如下：
采用webpack的配置文件设置输出打包文件
本次的构建目的只是为了验证高级js语法在安装babel之后能否正常编译执行，所以我就不在 index.html 中写内容了。
在项目根目录创建、编写配置文件 webpack.config.js
const path = require('path');
// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
// 在配置文件中，需要手动指定 入口 和 出口
entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
output: { // 输出文件相关的配置
path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
filename: 'bundle.js' // 这是指定 输出的文件的名称
},
};
一般来说，现在就可以执行 webpack 命令进行打包了，但是我在上面将 webpack 安装到本地项目中，所以还需要编写 npm 执行内部命令的脚本，才能够执行。
在 package.json 配置执行本地 webpack 执行命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
},
好了，配置了这个之后，就可以使用 npm run 脚本名称 来执行了，执行如下：
npm run dev
可以看到已经可以成功编辑打包出 bundle.js 压缩文件了。
编写main.js打印信息，设置 index.html 引用 bundle.js 脚本
首先在main.js 写一个打印信息，如下：
console.log("hello world");
然后在index.html引入bundle.js，如下：
span style="line-height: 26px;">html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="../dist/bundle.js">script>
body>
html>
此时，执行npm run dev打包一个新的 bundle.js ，然后打开 index.html，查看能否正常打印信息，如下：
那么下面就要开始安装babel，然后使用高级一些的语法来看看能否编译成功。
在main.js中写入ES6语法，查看打印信息
在安装babe将ES6\ES7转化低于语法ES5之前，我先经过测试，发现使用ES6的语法在chrome浏览器是能够支持运行的，而在IE则会报语法错误，如下：
main.js 代码如下：
// ES5
console.log("hello world es5");
// ES6
class Bar {
doStuff() {
console.log('stuff bar');
}
}
var b = new Bar();
b.doStuff(); // "stuff"
// ES6
class Foo {
static classMethod() {
return 'hello static foo';
}
}
console.log(Foo.classMethod()); // 'hello'
下面再来运行npm run dev打包编译 bundle.js。
首先在chrome浏览器查看index.html，查看打印信息如下：
说明 chrome 浏览器默认是支持 es6 语法的。
然后在ie浏览器查看index.html，查看打印信息如下：
说明 ie 默认是不支持 es6 语法的。
那么下面，我们开始来安装配置babel，看看后续 ie 浏览器能否支持。
安装babel
安装babel至本地项目中：
cnpm i -D babel-loader @babel/core
执行如下：
为了转化 es6 代码，要安装 babel 插件:
cnpm i -D @babel/preset-env @babel/polyfill
执行如下：
在根目录下创建 babel 配置文件 .babelrc:
{
"presets": ["@babel/preset-env"]
}
配置webpack.config.js设置使用babel的规则
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
再次在ie浏览器确认高级语法能否识别
好了，下面来在执行npm run dev打包编译一下，看看 ie浏览器能否识别打印高级语法的信息，如下：
防止全局污染
值得注意的是babel打包编译的时候，如果是写第三方库或者框架，使用 polyfill 可能会造成全局污染，所以可以使用 @babel/plugin-transform-runtime 防止全局污染。
安装：
npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime @babel/runtime-corejs2
注意：使用 -D 也就是 --save-dev，将其安装好测试开发环境， 而 -S 也就是 --save ，将其安装到生产环境的依赖中。
运行如下：
增加 babel 配置：
{
"presets": ["@babel/preset-env"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
注意："corejs": 2, // 这里设置2是因为上面安装的版本是
「更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】 吧：」
点击下面，查看更多Vue系列文章
扫一扫
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
