webpack入門學習筆記07 —— 關於babel的一些補充

1. 寫在前面

在以前的一篇博客中：使用babel打包編譯js文件 ，簡單介紹了若是在webpack中使用babel對高級JS語法進行轉換，以方便瀏覽器可以識別。

可是babel的相關知識不少，不能面面俱到所有講解，只能將咱們項目中常常使用的一些插件或者配置介紹一下。個人目的是拋磚引玉，更多知識你們仍是到babel官網學習：babeljs.io/ 。

這篇博客中，根據個人學習，對babel作一些補充。隨着本身學習的深刻，我也會時常跟新這篇博客，完善babel相關的知識點。這篇博客的主要內容以下：

• @babel/plugin-transform-runtime、@babel/runtime 插件的介紹

2. @babel/plugin-transform-runtime、@babel/runtime插件

首先說一下這兩款插件的使用場景，在以前的博客中提到過：babel默認配置的轉化能力有限，只能將部分ES6語法轉換成ES6語法，若是想要將更高級的ES6語法或者ES7等語法轉成低級語法，須要進行額外的配置。

熟悉ES6語法的程序員確定瞭解ES6語法中的 Generator 函數 和 Promise 對象 ，而且在項目中也會使用到這些高級語法。好比如下語法：

function * generator() {
    yield 1;
}

console.log(generator().next(() => {
    console.log('generator 執行完畢');
}));
複製代碼

那麼問題來了，當你打包編譯項目以後，在瀏覽器端運行的時候，會發現控制檯報錯了：

這是由於babel的默認配置不支持轉換這些高級語法，若是須要達到這個目的，就須要安裝配置額外的插件，也就是咱們如今提到的**@babel/plugin-transform-runtime、@babel/runtime** 插件。下面說一下如何安裝配置：

首先安裝 @babel/plugin-transform-runtime ，這是一個開發依賴，打包以後不須要這個包，因此執行下面的命令進行安裝：

yarn add @babel/plugin-transform-runtime -D
複製代碼

而後安裝 @babel/runtime ，須要說明的是，這是運行環境中所須要的依賴包，打包編譯以後仍是也是須要它的，因此執行下面的命令進行安裝：

yarn add @babel/runtime
複製代碼

安裝完成以後進行配置，配置的時候在上一篇博客配置babel的基礎上進行配置便可，這裏給出部分代碼，具體的配置能夠參考上一篇博客：使用babel打包編譯js文件 。

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env'     // 預設，將ES6轉成ES5
                    ],
                    plugins: [
                        '@babel/plugin-proposal-class-properties',   
                        '@babel/plugin-transform-runtime'	// 配置運行時的轉換插件
                    ]
                }
            },
            include: path.resolve(__dirname, 'src')  // 只轉換src目錄下的代碼
        }
    ]
}
複製代碼

進行如上配置以後，就能夠順利運行項目中的 Generator 函數 和 Promise 對象 等語法了。

這裏提一句：上面配置中的 include ，表示只對 src目錄 下的 .js 文件進行匹配。除此以外，還可使用 exclude 進行顯示，表示匹配出這些文件夾以外的 .js 文件，支持使用正則表達式，好比：exclude: /node_modules/ 。

3. 寫在後面

以上就是本篇博客的所有內容，隨和後面學習的升入，博客會被時常更新，錯誤之處，還但願各位大神指出。

上一篇: webpack入門學習筆記06 —— 使用babel打包編譯js文件

下一篇: webpack入門學習筆記08 —— 使用ESLint檢查項目代碼