在Webpack4.x環境下使用Babel轉換ES6語法

一、介紹

在Webpack中 默認只能轉換一部分ES6的新語法
部分更高級的ES6語法或ES7語法 Webpack無法轉換

比如：
ES6中類的靜態屬性

class Person{
    static info={name:"Mike",age:18}
}
console.log(Person.info)

此時 Webpack默認打包的時候會報錯
需要藉助第三方loader來處理這些高級的語法
當第三方loader將高級語法轉換爲低級語法之後 會將結果交給Webpack進行打包到bundle.js中

通過Babel可以很方便將高級的語法轉換爲低級的語法

Babel 是一個 JavaScript 編譯器 主要用於將ECMAScript 2015+版本的代碼轉換爲向後兼容的 JavaScript 語法 以便能夠運行在當前和舊版本的瀏覽器或其他環境中

二、使用步驟

只需三步即可配置Babel：

1、在Webpack中運行如下兩套命令 以安裝Babel相關的loader

第一套包：cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D
該套包裏有@babel/core babel-loader和@babel/plugin-transform-runtime
它們負責語法的轉換

第二套包：cnpm i @babel/preset-env @babel/plugin-proposal-class-properties -D
該套包裏有@babel/preset-env和@babel/plugin-proposal-class-properties
包含了所有與ES相關的語法 負責匹配語法之間的對應關係

2、配置webpack.config.js

在webpack配置文件webpack.config.js的module節點下的rules數組中 添加一個新的匹配規則：

{test:/\.js$/,use:"babel-loader",exclude:/node_modules/}

注：必須使用exclude屬性來指定要排除的文件(即不轉換的文件)
排除node_modules文件夾 因爲 若不排除node_modules 則babel默認會將node_modules中所有的第三方js文件都打包
佔用大量消耗cpu 同時打包速度非常慢 且最終還會導致項目也無法正常運行

var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    // 所有webpack插件的配置節點
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,"./src/index.html"),
            filename:"index.html"
        })
    ],
    // 配置第三方loader模塊
    module:{
        rules:[
            // 第三方模塊的匹配規則
            {test:/\.css$/,use:["style-loader","css-loader"]},
            {test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader"},
            {test:/\.ttf|eot|svg|woff|woff2$/,use:"url-loader"},
            {test:/\.js$/,use:"babel-loader",exclude:/node_modules/} // 配置babel來轉換高級ES語法
        ]
    }
}

3、配置.babelrc

在項目的根目錄中新建一個名爲.babelrc的配置文件 該配置文件爲JSON格式

在.babelrc中寫入如下配置：

在presets屬性裏配置babel語法
在plugins屬性裏配置安裝的babel插件

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

配置完畢

4、測試

class Person{
    static info={name:"Mike",age:18}
}
console.log(Person.info)

輸出結果：

ES6語法轉換成功

---