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，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</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社羣】 吧：