怎么在Webpack4中利用Babel處理ES6語法-創(chuàng)新互聯

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

成都創(chuàng)新互聯公司專注于中大型企業(yè)的網站設計、做網站和網站改版、網站營銷服務，追求商業(yè)策劃與數據分析、創(chuàng)意藝術與技術開發(fā)的融合，累計客戶千余家，服務滿意度達97%。幫助廣大客戶順利對接上互聯網浪潮，準確優(yōu)選出符合自己需要的互聯網運用，我們將一直專注成都品牌網站建設和互聯網程序開發(fā)，在前進的路上，與客戶一起成長！

修改 index.js 內容，寫一些 ES6 的語法：

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

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

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

來試一下吧，先安裝需要用的 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 代碼，但它并不會將ES6 代碼翻譯成向后兼容版本的代碼，如果想要執(zhí)行這一步，還需要安裝一個模塊 preset-env，它包含了所有 ES6 代碼轉換的規(guī)則:

npm install @babel/preset-env -D

安裝完之后配置一下：

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

這樣，運行打包命令，就可以把 ES6 語法翻譯成 ES5了，看一下打包的結果：

沒問題，語法已經翻譯成了當前所有瀏覽器能識別的語法，但是做到了這一點還是不夠，因為那些比較新的對象和函數，比如這里的 Promise 和 map，在低版本的瀏覽器里實際還是不存在的。所以這時不僅要進行語法的轉換，還要想辦法把這些新的特性，補充到低版本的瀏覽器里。怎么做呢？ babel 提供了一個工具叫 polyfill，安裝：

npm install @babel/polyfill -D

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

import '@babel/polyfill'

保存代碼，再次進行打包查看結果，可以發(fā)現打包后的 main.js 里面，有了很多代碼來幫助實現比如 Promise 和 map 這些新特性?？匆幌?main.js 文件的大?。?/p>

859KB，再看一下沒有使用 polyfill 之前的 main.js 大?。?/p>

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

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

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

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

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

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 是指打包會運行在什么樣的瀏覽器，這有三個瀏覽器，并注明了最低版本。在打包的過程中，babel 會去看這些瀏覽器對 ES6 代碼的支持情況，是否有必要進行語法轉換、填入一些新特性。 運行打包命令查看結果：

上述內容就是怎么在Webpack4中利用Babel處理ES6語法，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站名稱：怎么在Webpack4中利用Babel處理ES6語法-創(chuàng)新互聯
轉載源于：http://bm7419.com/article36/ihjpg.html

成都網站建設公司_創(chuàng)新互聯，為您提供服務器托管、搜索引擎優(yōu)化、網站維護、虛擬主機、建站公司、靜態(tài)網站

廣告

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