webpack4.x下babel的安裝、配置及使用詳解
前言
目前,ES6(ES2015)這樣的語法已經得到很大規(guī)模的應用,它具有更加簡潔、功能更加強大的特點,實際項目中很可能會使用采用了ES6語法的模塊,但瀏覽器對于ES6語法的支持并不完善。為了實現兼容,就需要使用轉換工具對ES6語法轉換為ES5語法,babel就是最常用的一個工具。那么在webpack中如何使用babel呢?這是本篇文章要探討的問題。
寫這篇文章的目的還在于最新webpack版本的一些操作方式已經變化、babel也在不斷更新,以往的一些資料或者教程已不適合。筆者對webpack最新版4.1.1下使用babel進行了探索,現將結果總結為本文,以下經測試通過可行,讀者可參考設置。
文章用例
為更加清楚的進行闡述,本文使用一個案例,如下:
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使用哪種轉碼規(guī)則進行文件處理。事實上,babel有幾種規(guī)則都可以實現對ES6語法的轉碼,如babel-preset-es2015、babel-preset-latest、babel-preset-env,不過官方現已建議采用babel-preset-env,本文也將采用babel-preset-env,你可以通過官網了解幾種規(guī)則的區(qū)別。同樣在命令行中定位到項目根目錄,輸入以下指令進行安裝:
npm install -D babel-preset-env
筆者安裝的版本是babel-preset-env@1.6.1。
二、配置babel 規(guī)則
上面僅僅是安裝了三個包,如果要使babel起作用,便需要配置babel規(guī)則。
第一種方式是通過package.json。在package.json文件中增加一個“babel"屬性,該屬性是一個JSON對象,作用是設置項目中的babel轉碼規(guī)則和使用到的babel插件,其基本格式如下:
"babel":{ "presets": [], "plugins": [] }
”presets”屬性字段設定轉碼規(guī)則,”plugins”屬性設置使用到的插件。在本項目中只需將”babel”屬性 的”presets”:設置為[“env”]即可,如下所示:
"babel":{ "presets": ["env"] }
上面的設置告訴npm本項目將使用babel,并且使用bable-preset-env規(guī)則進行轉碼,即實現對ES2015+語法進行轉碼。
除此之外,還有第二種方式,即通過.babelrc文件。在項目根目錄下新建.babelrc文件,里面只需輸入第一種方式中”babel”屬性的值即可:
{ "presets": ["env"] }
作用和第一種方式相同。
三、建立并配置webpack.config.js文件
僅有上面仍然不能起作用,雖然上面已經配置好babel的規(guī)則,但webpack仍然不知道何時使用該規(guī)則,這便需要使用webpack.config.js文件。
這個文件的作用是對webpack打包的參數進行配置。我的第一篇關于webpack4.x的文章《webpack4.x開發(fā)環(huán)境配置》中已經提到,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的規(guī)則進行轉碼。這里并沒有使用entry、output這樣的參數,這是webpack4.x有默認的入口和出口,本項目無須改變,因此便不必進行設置。
四、運行查看結果
假使你已經在package.json文件的"scripts"屬性下增加了"build"屬性,即
"build": "webpack --mode production --progress --display-modules --colors --display-reasons"
現在,在命令行定位到項目根目錄,執(zhí)行
npm run build
這就相當于執(zhí)行"build"屬性對應的腳本。
現在,webpack開始進行打包,當打包完成后,用瀏覽器打開dist目錄下的index.html查看結果,可以發(fā)現彈出兩次彈窗
第一次是"hello world",第二次是"2,3,4"。
這表明a.js中的arrowTest()函數成功執(zhí)行,打開main.js查看打包后的代碼,也可以發(fā)現箭頭函數部分的代碼已經被轉換成ES5的語法,如下:
[1,2,3].map(function(r){return r+1})
這表明整個babel的配置及使用已經成功。
當然,以上只是最基本的配置和使用,如果要應對更加復雜的情況,只需要參照官方文檔對相關參數進行修改,這并不是什么難事,完!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。