babel怎么在webpack4.x中進行安裝

這篇文章給大家介紹babel怎么在webpack4.x中進行安裝，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

1、項目根目錄為webpack-test，當然這個名字可以隨意；

2、在項目根目錄下，有一個index.js文件，代碼如下：

3、index.js所引入的a.js文件采用了ES6語法的箭頭函數，代碼如下：

4、最終打包成dist目錄下的main.js文件，同時dist目錄下有一個index.html文件引入main.js的腳本，index.html文件內容如下：

一、安裝babel-loader、babel-core、babel-preset-env

這三個文件都是必需的，但彼此的作用各不相同。

首先，babel-loader作為webpack的loader的一種，作用同其他loader一樣，實現對特定文件類型的處理。webpack官方文檔中指出了loader的作用，即：

loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解
JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack的打包能力，對它們進行處理。

雖然webpack本身就能夠處理.js文件，但無法對ES2015+的語法進行轉換，babel-loader的作用正是實現對使用了ES2015+語法的.js文件進行處理。

要使用babel，首先要安裝babel-loader，命令行中定位到項目根目錄輸入以下指令進行安裝：

npm install -D babel-loader

筆者這里安裝完成后顯示版本是babel-loader@7.1.4。

第二，babel-core的作用在于提供一系列api。這便是說，當webpack使用babel-loader處理文件時，babel-loader實際上調用了babel-core的api，因此也必須安裝babel-core：

npm install -D babel-core

筆者安裝完成顯示版本為babel-core@6.26.0。

第三，babel-preset-env的作用是告訴babel使用哪種轉碼規則進行文件處理。事實上，babel有幾種規則都可以實現對ES6語法的轉碼，如babel-preset-es2015、babel-preset-latest、babel-preset-env，不過官方現已建議采用babel-preset-env，本文也將采用babel-preset-env，你可以通過官網了解幾種規則的區別。同樣在命令行中定位到項目根目錄，輸入以下指令進行安裝：

npm install -D babel-preset-env

筆者安裝的版本是babel-preset-env@1.6.1。

二、配置babel 規則

上面僅僅是安裝了三個包，如果要使babel起作用，便需要配置babel規則。

第一種方式是通過package.json。在package.json文件中增加一個“babel"屬性，該屬性是一個JSON對象，作用是設置項目中的babel轉碼規則和使用到的babel插件，其基本格式如下：

"babel":{
 "presets": [],
 "plugins": []
}

”presets”屬性字段設定轉碼規則，”plugins”屬性設置使用到的插件。在本項目中只需將”babel”屬性 的”presets”:設置為[“env”]即可，如下所示：

"babel":{
 "presets": ["env"]
}

上面的設置告訴npm本項目將使用babel，并且使用bable-preset-env規則進行轉碼，即實現對ES2015+語法進行轉碼。

除此之外，還有第二種方式，即通過.babelrc文件。在項目根目錄下新建.babelrc文件，里面只需輸入第一種方式中”babel”屬性的值即可：

{
 "presets": ["env"]
}

作用和第一種方式相同。

三、建立并配置webpack.config.js文件

僅有上面仍然不能起作用，雖然上面已經配置好babel的規則，但webpack仍然不知道何時使用該規則，這便需要使用webpack.config.js文件。

這個文件的作用是對webpack打包的參數進行配置。我的第一篇關于webpack4.x的文章《webpack4.x開發環境配置》中已經提到，webpack4.x中webpack.config.js這樣的配置文件不是必須的，但事實上，如果想要進行更加個性化的打包配置，仍然要使用該文件。在根目錄下新建webpack.config.js文件，在其中輸入：

module.exports={
  module:{
    rules:[
      {
        test: /\.js$/,
         exclude: /node_modules/, 
         loader: "babel-loader"
      }
    ]
  }

}

這就告訴webpack打包時，一旦匹配到.js文件就使用babel-loader進行處理，如前文所述，babel-loader調用babel-core的api使用bable-preset-env的規則進行轉碼。這里并沒有使用entry、output這樣的參數，這是webpack4.x有默認的入口和出口，本項目無須改變，因此便不必進行設置。

四、運行查看結果

假使你已經在package.json文件的"scripts"屬性下增加了"build"屬性，即

"build": "webpack --mode production --progress --display-modules --colors --display-reasons"

現在，在命令行定位到項目根目錄，執行

npm run build

這就相當于執行"build"屬性對應的腳本。

現在，webpack開始進行打包，當打包完成后，用瀏覽器打開dist目錄下的index.html查看結果，可以發現彈出兩次彈窗

第一次是"hello world"，第二次是"2,3,4"。

這表明a.js中的arrowTest()函數成功執行，打開main.js查看打包后的代碼，也可以發現箭頭函數部分的代碼已經被轉換成ES5的語法，如下：

[1,2,3].map(function(r){return r+1})

關于babel怎么在webpack4.x中進行安裝就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。