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

時間 2019-11-29

標籤 webpack 入門學習筆記使用 babel 打包編譯文件欄目 JavaScript 简体版

原文原文鏈接

1. 寫在前面

在前端項目中，占主導地位的文件，我想應該是 .js 文件。隨着 JS語言 的不斷升級改進，愈來愈多的高級語法被加入到該語言中，好比咱們熟知的 ES6語法、ES7語法 等。css

雖然 ES6語法、ES7語法 咱們寫起來感受很是方便，可是目前市面上的瀏覽器卻不認識這些語法，這就致使咱們辛辛苦苦作出來的項目卻不能運行，讓人很抓狂。這個時候咱們要怎麼辦呢？html

辦法確定是有的，咱們能夠藉助webpack這一工具，來將這些高級語法，轉換成瀏覽器可以識別的低級語法（如ES5語法），這樣就可使項目正常運行了。而webpack之因此可以作到這一點，是由於它使用了 babel 這一工具。這是一個什麼工具呢？這篇博客就會來說解。前端

爲了方便不一樣的讀者都能從這篇博客中有所收穫，本篇博客準備在前半部分介紹如何在webpack中配置 babel 來編譯轉換高版本語法，在後半部分會講解關於 babel 的知識。你們各取所需，根據本身的實際狀況來選擇閱讀哪一部分。webpack

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的預設，它的主要功能是將 ES6 語法轉成 ES5 語法。web

依賴包安裝完成以後，要到 webpack.config.js 文件中進行配置，配置的步驟和前面博客中講述的配置 .css 文件的步驟相似，這裏直接給出配置代碼（重點關注有註釋的部分）shell

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文件，而後用下面所配置的工具對這些文件進行編譯處理
                use: {
                    loader: 'babel-loader',     // babel的核心模塊
                    options: {
                        presets: [              // 配置babel的預設，將ES語法轉成ES5語法
                            '@babel/preset-env'
                        ]
                    }
                }
            }
        ]
    }
}
複製代碼

配置完成以後，咱們就能夠在項目中使用 ES6 語法來編寫項目了。注意我這裏說的是 ES6 語法，若是在項目中你使用了更新的 ES7 語法，僅靠上面的配置是不行的，在你進行打包編譯的時候會報錯，好比在項目中使用瞭如下的 ES7 語法：瀏覽器

class A {
    className = 'A' 
}

let a = new A();
複製代碼

這個時候再進行打包編譯的時候，會報錯如下錯誤：根據提示，是由於咱們沒有安裝所須要的依賴包。babel

道理很簡單，僅靠上面書寫的 babel 配置，只能轉換 ES6 語法，若是要轉換更高版本的語法，就要進行其餘配置，好比這裏轉換 ES7 語法。less

根據提示，咱們須要安裝所需的包：@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插件，轉換更更高版本語法
                '@babel/plugin-proposal-class-properties'
            ]
        }
    }
}
複製代碼

同理，若是你在項目中使用了其餘的高級語法，好比 裝飾器 ，那麼也是須要額外配置的，這裏就不一一闡述，到時候你可根據webpack的報錯信息，進行查找配置便可。

到這裏webpack打包編譯 .js 文件的相關知識已經講完，下面結合本身的認識，介紹一些 babel 的知識。

3. babel是個什麼東西

首先列出babel的中文官網，更多知識可查閱該官網：www.babeljs.cn/ 。

根據官網的定義：Babel 是一個 工具鏈 ，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中。在具體的實踐中，babel能夠幫咱們作一下事情：

語法轉換
經過 Polyfill 方式在目標環境中添加缺失的特性 (經過 @babel/polyfill 模塊)
源碼轉換 (codemods)
更多 ...

對於前端小白來講，上面的文字還不足以幫助他們瞭解babel，下面我用大白話來講一下：咱們將babel類比成手機上使用的 中英詞典APP。

咱們知道，手機上安裝的 中英詞典APP 能夠幫助咱們將不認識的英文翻譯成咱們熟知的漢語，這樣咱們就能夠理解單詞和句子表達的意義了。相似，babel 能夠將咱們寫的 ES6 語法翻譯成瀏覽器熟悉的 ES5 語法，這樣，瀏覽器就能夠知道這些 JS 代碼要作什麼事情了。好比下面的例子：

中英詞典APP 在咱們安裝之初，就能夠將英文成中文，是由於開發程序員在這個APP中預先設置了中英翻譯功能。同理，babel 在配置之初就能夠將 ES6 語法翻譯成 ES5 語法，是由於咱們在配置之初，給 babel 指定了 預設（presets） ，才使得 babel 能夠作到這一點。

默認狀態下，中英詞典APP 能夠將英語翻譯成漢語，可是不能將俄語翻譯成漢語，由於程序員在開發以前，沒有預先設置這個功能，若是咱們想要這款APP也能夠翻譯俄語，那麼就須要下載額外的 俄語翻譯擴展包 ，下載完成以後，就能夠實現這個功能。

同理，在默認配置下， babel 能夠將 ES6 翻譯成 ES5 ，可是不能將 ES7 翻譯成 ES5。這是由於在 babel 中有將 ES6 翻譯成 ES5 的 預設（presets） ，沒有將 ES7 翻譯成 ES5 的 預設（presets） 。若是要實現這個功能，咱們就須要下載配置額外的插件，好比第一節提到的 @babel/plugin-proposal-class-properties 。插件配置下載配置完成以後，就能夠將 ES7 等更高級語法翻譯成 ES5 語法。