本篇文章為大家展示了怎么在Webpack4中利用Babel處理ES6語(yǔ)法，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)站重做改版、溫嶺網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁(yè)面制作、商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為溫嶺等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

修改 index.js 內(nèi)容，寫(xiě)一些 ES6 的語(yǔ)法：

const arr = [
  new Promise(() => {}),
  new Promise(() => {})
];

arr.map(item => {
  console.log(item);
})

ES6 很強(qiáng)大，但目前并不是所有的瀏覽器都支持，所以需要用到 Babel，讓舊的瀏覽器或環(huán)境中將 ES6 代碼轉(zhuǎn)換為向后兼容版本的 JavaScript 代碼。

來(lái)試一下吧，先安裝需要用的 Babel 包：

npm install babel-loader @babel/core -D

配置 webpack.config.js，增加一條 rulues ：

 module: {
  rules: [{
   test: /\.js$/,
   exclude: /node_modules/, // 排除該目錄下的所有代碼
   loader: "babel-loader"
  }]
 }

babel-loader 告訴了 webpack 怎么處理 ES6 代碼，但它并不會(huì)將ES6 代碼翻譯成向后兼容版本的代碼，如果想要執(zhí)行這一步，還需要安裝一個(gè)模塊 preset-env，它包含了所有 ES6 代碼轉(zhuǎn)換的規(guī)則:

npm install @babel/preset-env -D

安裝完之后配置一下：

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除該目錄下的所有代碼
 loader: 'babel-loader',
 options:{
  'presets': ['@babel/preset-env']
 }
}]

這樣，運(yùn)行打包命令，就可以把 ES6 語(yǔ)法翻譯成 ES5了，看一下打包的結(jié)果：

沒(méi)問(wèn)題，語(yǔ)法已經(jīng)翻譯成了當(dāng)前所有瀏覽器能識(shí)別的語(yǔ)法，但是做到了這一點(diǎn)還是不夠，因?yàn)槟切┍容^新的對(duì)象和函數(shù)，比如這里的 Promise 和 map，在低版本的瀏覽器里實(shí)際還是不存在的。所以這時(shí)不僅要進(jìn)行語(yǔ)法的轉(zhuǎn)換，還要想辦法把這些新的特性，補(bǔ)充到低版本的瀏覽器里。怎么做呢？ babel 提供了一個(gè)工具叫 polyfill，安裝：

npm install @babel/polyfill -D

然后在 index.js 的最頂部，引入這個(gè)包：

import '@babel/polyfill'

保存代碼，再次進(jìn)行打包查看結(jié)果，可以發(fā)現(xiàn)打包后的 main.js 里面，有了很多代碼來(lái)幫助實(shí)現(xiàn)比如 Promise 和 map 這些新特性?？匆幌?main.js 文件的大小：

859KB，再看一下沒(méi)有使用 polyfill 之前的 main.js 大小：

只有4.36KB，使用 polyfill 之后文件變大了很多，這說(shuō)明了 polyfill 使用了非常多的代碼來(lái)填入新特性。
但是，index.js 里只使用了 Promise 和 map，其它的新特性都沒(méi)用，能不能把那些沒(méi)用到的實(shí)現(xiàn)方法都剔除了呢？ 可以，給 preset-env 增加一個(gè) useBuiltIns 配置：

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除該目錄下的所有代碼
 loader: 'babel-loader',
 options: {
  'presets': [
   ['@babel/preset-env', {
    useBuiltIns: 'usage'
   }]
  ]
 }
}]

useBuiltIns: 'usage' 的意思就是說(shuō)，當(dāng)使用 polyfill 往低版本瀏覽器填入一些不存在的特性時(shí)，不是全部都填入，而是根據(jù)業(yè)務(wù)代碼使用到的特性去選擇填入，比如這里使用了 Promise 和 map，那就只填入這兩個(gè)，其它的都不用。 再次打包查看結(jié)果：

可以看到，main.js 的大小只有 138KB了。

這里還可以配置一些其它的參數(shù)，比如 targets 參數(shù)：

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除該目錄下的所有代碼
 loader: 'babel-loader',
 options: {
  'presets': [
   ['@babel/preset-env', {
    useBuiltIns: 'usage',
    targets:{
     edge: '17', // edge高于17的版本
     firefox: '60', // firefox 高于60的版本
     chrome: '67' // chrome高于67的版本
    }
   }]
  ]
 }
}]

targets 是指打包會(huì)運(yùn)行在什么樣的瀏覽器，這有三個(gè)瀏覽器，并注明了最低版本。在打包的過(guò)程中，babel 會(huì)去看這些瀏覽器對(duì) ES6 代碼的支持情況，是否有必要進(jìn)行語(yǔ)法轉(zhuǎn)換、填入一些新特性。 運(yùn)行打包命令查看結(jié)果：

上述內(nèi)容就是怎么在Webpack4中利用Babel處理ES6語(yǔ)法，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)名稱(chēng)：怎么在Webpack4中利用Babel處理ES6語(yǔ)法
網(wǎng)址分享：http://chinadenli.net/article12/giicdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、自適應(yīng)網(wǎng)站、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)