欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack4.x下babel的安裝、配置及使用詳解

 更新時(shí)間:2019年03月07日 15:53:48   作者:白水螺絲  
這篇文章主要介紹了webpack4.x下babel的安裝、配置及使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

目前,ES6(ES2015)這樣的語(yǔ)法已經(jīng)得到很大規(guī)模的應(yīng)用,它具有更加簡(jiǎn)潔、功能更加強(qiáng)大的特點(diǎn),實(shí)際項(xiàng)目中很可能會(huì)使用采用了ES6語(yǔ)法的模塊,但瀏覽器對(duì)于ES6語(yǔ)法的支持并不完善。為了實(shí)現(xiàn)兼容,就需要使用轉(zhuǎn)換工具對(duì)ES6語(yǔ)法轉(zhuǎn)換為ES5語(yǔ)法,babel就是最常用的一個(gè)工具。那么在webpack中如何使用babel呢?這是本篇文章要探討的問(wèn)題。

寫這篇文章的目的還在于最新webpack版本的一些操作方式已經(jīng)變化、babel也在不斷更新,以往的一些資料或者教程已不適合。筆者對(duì)webpack最新版4.1.1下使用babel進(jìn)行了探索,現(xiàn)將結(jié)果總結(jié)為本文,以下經(jīng)測(cè)試通過(guò)可行,讀者可參考設(shè)置。

文章用例

為更加清楚的進(jìn)行闡述,本文使用一個(gè)案例,如下:

1、項(xiàng)目根目錄為webpack-test,當(dāng)然這個(gè)名字可以隨意;

2、在項(xiàng)目根目錄下,有一個(gè)index.js文件,代碼如下:

 

3、index.js所引入的a.js文件采用了ES6語(yǔ)法的箭頭函數(shù),代碼如下:

 

4、最終打包成dist目錄下的main.js文件,同時(shí)dist目錄下有一個(gè)index.html文件引入main.js的腳本,index.html文件內(nèi)容如下:

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

這三個(gè)文件都是必需的,但彼此的作用各不相同。

首先,babel-loader作為webpack的loader的一種,作用同其他loader一樣,實(shí)現(xiàn)對(duì)特定文件類型的處理。webpack官方文檔中指出了loader的作用,即:

loader 讓 webpack 能夠去處理那些非 JavaScript 文件(webpack 自身只理解
JavaScript)。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊,然后你就可以利用 webpack的打包能力,對(duì)它們進(jìn)行處理。

雖然webpack本身就能夠處理.js文件,但無(wú)法對(duì)ES2015+的語(yǔ)法進(jìn)行轉(zhuǎn)換,babel-loader的作用正是實(shí)現(xiàn)對(duì)使用了ES2015+語(yǔ)法的.js文件進(jìn)行處理。

要使用babel,首先要安裝babel-loader,命令行中定位到項(xiàng)目根目錄輸入以下指令進(jìn)行安裝:

npm install -D babel-loader

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

第二,babel-core的作用在于提供一系列api。這便是說(shuō),當(dāng)webpack使用babel-loader處理文件時(shí),babel-loader實(shí)際上調(diào)用了babel-core的api,因此也必須安裝babel-core:

npm install -D babel-core

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

第三,babel-preset-env的作用是告訴babel使用哪種轉(zhuǎn)碼規(guī)則進(jìn)行文件處理。事實(shí)上,babel有幾種規(guī)則都可以實(shí)現(xiàn)對(duì)ES6語(yǔ)法的轉(zhuǎn)碼,如babel-preset-es2015、babel-preset-latest、babel-preset-env,不過(guò)官方現(xiàn)已建議采用babel-preset-env,本文也將采用babel-preset-env,你可以通過(guò)官網(wǎng)了解幾種規(guī)則的區(qū)別。同樣在命令行中定位到項(xiàng)目根目錄,輸入以下指令進(jìn)行安裝:

npm install -D babel-preset-env

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

二、配置babel 規(guī)則

上面僅僅是安裝了三個(gè)包,如果要使babel起作用,便需要配置babel規(guī)則。

第一種方式是通過(guò)package.json。在package.json文件中增加一個(gè)“babel"屬性,該屬性是一個(gè)JSON對(duì)象,作用是設(shè)置項(xiàng)目中的babel轉(zhuǎn)碼規(guī)則和使用到的babel插件,其基本格式如下:

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

”presets”屬性字段設(shè)定轉(zhuǎn)碼規(guī)則,”plugins”屬性設(shè)置使用到的插件。在本項(xiàng)目中只需將”babel”屬性 的”presets”:設(shè)置為[“env”]即可,如下所示:

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

上面的設(shè)置告訴npm本項(xiàng)目將使用babel,并且使用bable-preset-env規(guī)則進(jìn)行轉(zhuǎn)碼,即實(shí)現(xiàn)對(duì)ES2015+語(yǔ)法進(jìn)行轉(zhuǎn)碼。

除此之外,還有第二種方式,即通過(guò).babelrc文件。在項(xiàng)目根目錄下新建.babelrc文件,里面只需輸入第一種方式中”babel”屬性的值即可:

{
 "presets": ["env"]
}

作用和第一種方式相同。

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

僅有上面仍然不能起作用,雖然上面已經(jīng)配置好babel的規(guī)則,但webpack仍然不知道何時(shí)使用該規(guī)則,這便需要使用webpack.config.js文件。

這個(gè)文件的作用是對(duì)webpack打包的參數(shù)進(jìn)行配置。我的第一篇關(guān)于webpack4.x的文章《webpack4.x開(kāi)發(fā)環(huán)境配置》中已經(jīng)提到,webpack4.x中webpack.config.js這樣的配置文件不是必須的,但事實(shí)上,如果想要進(jìn)行更加個(gè)性化的打包配置,仍然要使用該文件。在根目錄下新建webpack.config.js文件,在其中輸入:

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

}

這就告訴webpack打包時(shí),一旦匹配到.js文件就使用babel-loader進(jìn)行處理,如前文所述,babel-loader調(diào)用babel-core的api使用bable-preset-env的規(guī)則進(jìn)行轉(zhuǎn)碼。這里并沒(méi)有使用entry、output這樣的參數(shù),這是webpack4.x有默認(rèn)的入口和出口,本項(xiàng)目無(wú)須改變,因此便不必進(jìn)行設(shè)置。

四、運(yùn)行查看結(jié)果

假使你已經(jīng)在package.json文件的"scripts"屬性下增加了"build"屬性,即

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

現(xiàn)在,在命令行定位到項(xiàng)目根目錄,執(zhí)行

npm run build

這就相當(dāng)于執(zhí)行"build"屬性對(duì)應(yīng)的腳本。

現(xiàn)在,webpack開(kāi)始進(jìn)行打包,當(dāng)打包完成后,用瀏覽器打開(kāi)dist目錄下的index.html查看結(jié)果,可以發(fā)現(xiàn)彈出兩次彈窗

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

這表明a.js中的arrowTest()函數(shù)成功執(zhí)行,打開(kāi)main.js查看打包后的代碼,也可以發(fā)現(xiàn)箭頭函數(shù)部分的代碼已經(jīng)被轉(zhuǎn)換成ES5的語(yǔ)法,如下:

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

這表明整個(gè)babel的配置及使用已經(jīng)成功。

當(dāng)然,以上只是最基本的配置和使用,如果要應(yīng)對(duì)更加復(fù)雜的情況,只需要參照官方文檔對(duì)相關(guān)參數(shù)進(jìn)行修改,這并不是什么難事,完!

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序中使用Async-await方法異步請(qǐng)求變?yōu)橥秸?qǐng)求方法

    微信小程序中使用Async-await方法異步請(qǐng)求變?yōu)橥秸?qǐng)求方法

    這篇文章主要介紹了微信小程序中使用Async-await方法異步請(qǐng)求變?yōu)橥秸?qǐng)求方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-03-03
  • JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開(kāi)效果實(shí)例

    JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開(kāi)效果實(shí)例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開(kāi)效果,結(jié)合具體實(shí)例形式分析了javascript事件響應(yīng)及針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2017-09-09
  • 瀏覽器縮放檢測(cè)的js代碼

    瀏覽器縮放檢測(cè)的js代碼

    這篇文章主要介紹了瀏覽器縮放檢測(cè)的js代碼,需要的朋友可以參考下
    2014-09-09
  • 微信小程序?qū)崿F(xiàn)列表滾動(dòng)頭部吸頂?shù)氖纠a

    微信小程序?qū)崿F(xiàn)列表滾動(dòng)頭部吸頂?shù)氖纠a

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)列表滾動(dòng)頭部吸頂?shù)氖纠a,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • js實(shí)現(xiàn)添加刪除表格操作

    js實(shí)現(xiàn)添加刪除表格操作

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)添加刪除表格操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法

    js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法

    這篇文章主要介紹了js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法,涉及javascript針對(duì)頁(yè)面元素結(jié)點(diǎn)的遍歷與設(shè)置等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-08-08
  • JS代碼判斷集錦大全

    JS代碼判斷集錦大全

    本文通過(guò)實(shí)例代碼給大家介紹了js代碼判斷的方法,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2007-12-12
  • JavaScript cookie的設(shè)置獲取刪除詳解

    JavaScript cookie的設(shè)置獲取刪除詳解

    這篇文章主要介紹了JavaScript cookie的設(shè)置獲取刪除等等,,需要的朋友可以參考下
    2014-02-02
  • Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)

    Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)

    經(jīng)理交給我一個(gè)網(wǎng)站新聞資訊網(wǎng)頁(yè)開(kāi)發(fā)的活兒,對(duì)于我這樣的java程序員,沒(méi)有接觸過(guò)網(wǎng)頁(yè)設(shè)計(jì)這么高端的東東,該怎么搞呢,去度娘那搜索到不少結(jié)果,而且很大部分都是用jquery做的,于是根據(jù)自己的一些的理解,提供了這篇jquery輪播效果的講解,有需要的朋友可以來(lái)參考下
    2015-08-08
  • Javasipt:操作radio標(biāo)簽詳解

    Javasipt:操作radio標(biāo)簽詳解

    本篇文章主要介紹了Javasipt:操作radio標(biāo)簽。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2013-12-12

最新評(píng)論