1. 寫在前面

在前端項(xiàng)目中托修，占主導(dǎo)地位的文件，我想應(yīng)該是 .js 文件恒界。隨著 JS語言 的不斷升級改進(jìn)睦刃，越來越多的高級語法被加入到該語言中，比如我們熟知的 ES6語法十酣、ES7語法 等涩拙。

雖然 ES6語法、ES7語法 我們寫起來感覺非常方便耸采，但是目前市面上的瀏覽器卻不認(rèn)識這些語法兴泥，這就導(dǎo)致我們辛辛苦苦做出來的項(xiàng)目卻不能運(yùn)行，讓人很抓狂虾宇。這個時候我們要怎么辦呢搓彻？

辦法肯定是有的，我們可以借助webpack這一工具，來將這些高級語法旭贬，轉(zhuǎn)換成瀏覽器能夠識別的低級語法（如ES5語法）怔接，這樣就可以使項(xiàng)目正常運(yùn)行了。而webpack之所以能夠做到這一點(diǎn)稀轨，是因?yàn)樗褂昧?babel 這一工具扼脐。這是一個什么工具呢？這篇博客就會來講解奋刽。

為了方便不同的讀者都能從這篇博客中有所收獲瓦侮，本篇博客準(zhǔn)備在前半部分介紹如何在webpack中配置 babel 來編譯轉(zhuǎn)換高版本語法，在后半部分會講解關(guān)于 babel 的知識佣谐。大家各取所需肚吏，根據(jù)自己的實(shí)際情況來選擇閱讀哪一部分。

2. 在webpack中配置babel台谍，編譯高本版JS語法

既然要使用 babel 我們就要先安裝這些依賴包须喂，這里我們需要安裝三個包：babel-loader 、 @babel/core 趁蕊、 @babel/preset-env 坞生，安裝命令如下：

yarn add babel-loader @babel/core @babel/preset-env -D

簡單介紹一下這是三個包的：babel-loader 和 @babel/core 是核心插件。@babel/preset-env 是babel的 預(yù)設(shè) 掷伙，它的主要功能是將 ES6 語法轉(zhuǎn)成 ES5 語法是己。

依賴包安裝完成之后，要到 webpack.config.js 文件中進(jìn)行配置任柜，配置的步驟和前面博客中講述的配置 .css 文件的步驟類似卒废，這里直接給出配置代碼（重點(diǎn)關(guān)注有注釋的部分）

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')

module.exports = {
    devServer: {
        port: 3000,  
        progress: true,  
        contentBase: "./build",  
        compress: true  
    },
    mode: "development",  
    entry: "./src/index.js",  
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'main.css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.js$/,      // 匹配js文件，然后用下面所配置的工具對這些文件進(jìn)行編譯處理
                use: {
                    loader: 'babel-loader',     // babel的核心模塊
                    options: {
                        presets: [              // 配置babel的預(yù)設(shè)宙地，將ES語法轉(zhuǎn)成ES5語法
                            '@babel/preset-env'
                        ]
                    }
                }
            }
        ]
    }
}

配置完成之后摔认，我們就可以在項(xiàng)目中使用 ES6 語法來編寫項(xiàng)目了。注意我這里說的是 ES6 語法宅粥，如果在項(xiàng)目中你使用了更新的 ES7 語法参袱，僅靠上面的配置是不行的，在你進(jìn)行打包編譯的時候會報錯秽梅，比如在項(xiàng)目中使用了以下的 ES7 語法：

class A {
    className = 'A' 
}

let a = new A();

這個時候再進(jìn)行打包編譯的時候抹蚀，會報錯以下錯誤：根據(jù)提示，是因?yàn)槲覀儧]有安裝所需要的依賴包企垦。

道理很簡單环壤，僅靠上面書寫的 babel 配置，只能轉(zhuǎn)換 ES6 語法钞诡，如果要轉(zhuǎn)換更高版本的語法郑现，就要進(jìn)行其他配置湃崩，比如這里轉(zhuǎn)換 ES7 語法。

根據(jù)提示懂酱，我們需要安裝所需的包：@babel/plugin-proposal-class-properties 竹习，安裝代碼如下：

yarn add @babel/plugin-proposal-class-properties -D

安裝完成之后，修改 webpack.config.js 文件中的 babel 配置列牺，修改后的代碼如下:

{
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                '@babel/preset-env'
            ],
            plugins: [  // 配置babel插件整陌，轉(zhuǎn)換更更高版本語法
                '@babel/plugin-proposal-class-properties'
            ]
        }
    }
}

同理，如果你在項(xiàng)目中使用了其他的高級語法瞎领，比如 裝飾器 泌辫，那么也是需要額外配置的，這里就不一一闡述九默，到時候你可根據(jù)webpack的報錯信息震放，進(jìn)行查找配置即可。

到這里webpack打包編譯 .js 文件的相關(guān)知識已經(jīng)講完驼修，下面結(jié)合自己的認(rèn)識殿遂，介紹一些 babel 的知識。

3. babel是個什么東西

首先列出babel的中文官網(wǎng)乙各，更多知識可查閱該官網(wǎng)：https://www.babeljs.cn/ 墨礁。

根據(jù)官網(wǎng)的定義：Babel 是一個 工具鏈 ，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法耳峦，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中恩静。 在具體的實(shí)踐中，babel可以幫我們做一下事情：

• 語法轉(zhuǎn)換
• 通過 Polyfill 方式在目標(biāo)環(huán)境中添加缺失的特性 (通過 @babel/polyfill 模塊)
• 源碼轉(zhuǎn)換 (codemods)
• 更多 ...

對于前端小白來說蹲坷，上面的文字還不足以幫助他們了解babel驶乾，下面我用大白話來說一下：我們將babel類比成手機(jī)上使用的 中英詞典APP。

我們知道循签，手機(jī)上安裝的 中英詞典APP 可以幫助我們將不認(rèn)識的英文翻譯成我們熟知的漢語级乐，這樣我們就可以理解單詞和句子表達(dá)的意義了。類似县匠，babel 可以將我們寫的 ES6 語法翻譯成瀏覽器熟悉的 ES5 語法唇牧，這樣，瀏覽器就可以知道這些 JS 代碼要做什么事情了聚唐。比如下面的例子：

中英詞典APP 在我們安裝之初，就可以將英文成中文腔召，是因?yàn)殚_發(fā)程序員在這個APP中預(yù)先設(shè)置了中英翻譯功能杆查。同理，babel 在配置之初就可以將 ES6 語法翻譯成 ES5 語法臀蛛，是因?yàn)槲覀冊谂渲弥跚阻耄o babel 指定了 預(yù)設(shè)（presets） 崖蜜，才使得 babel 可以做到這一點(diǎn)。

默認(rèn)狀態(tài)下客峭，中英詞典APP 可以將英語翻譯成漢語豫领，但是不能將俄語翻譯成漢語，因?yàn)槌绦騿T在開發(fā)之前舔琅，沒有預(yù)先設(shè)置這個功能等恐，如果我們想要這款A(yù)PP也可以翻譯俄語，那么就需要下載額外的 俄語翻譯擴(kuò)展包 备蚓，下載完成之后课蔬，就可以實(shí)現(xiàn)這個功能。

同理郊尝，在默認(rèn)配置下二跋， babel 可以將 ES6 翻譯成 ES5 ，但是不能將 ES7 翻譯成 ES5流昏。這是因?yàn)樵?babel 中有將 ES6 翻譯成 ES5 的 預(yù)設(shè)（presets） 扎即，沒有將 ES7 翻譯成 ES5 的 預(yù)設(shè)（presets） 。如果要實(shí)現(xiàn)這個功能况凉，我們就需要下載配置額外的 插件谚鄙，比如第一節(jié)提到的 @babel/plugin-proposal-class-properties 。插件 配置下載配置完成之后茎刚，就可以將 ES7 等更高級語法翻譯成 ES5 語法襟锐。

通過babel的中文官網(wǎng)，我們可以看到對于不同版本的語法膛锭，有不同的插件粮坞。相當(dāng)于在 中英詞典APP 中，對于不同的語言初狰，有不同的擴(kuò)展包莫杈，需要什么擴(kuò)展包，我們下載即可奢入。

根據(jù)個人的經(jīng)驗(yàn)筝闹，在使用這些插件的時候，項(xiàng)目開發(fā)之初不用配置腥光。在打包編譯的時候关顷，如果報錯了，再根據(jù)報錯信息武福，查看缺少什么插件议双，然后再進(jìn)行配置即可。當(dāng)然捉片，如果你經(jīng)驗(yàn)很豐富平痰，一開始就知道要使用那些插件汞舱，那么肯定要提前配置，

4. 寫在最后

好了宗雇，以上就是本篇博客的所有內(nèi)容了昂芜，只是個人學(xué)習(xí)過程中的一些心得體會，如果有不當(dāng)?shù)牡胤脚馄眩€希望各位大神給出指點(diǎn)泌神。

如果你想深入學(xué)習(xí) babel ，可以看他們官網(wǎng)的文檔嘹履，個人覺得還是非常詳細(xì)的：https://www.babeljs.cn/docs/