webpack如何將es6轉成es5的模塊

本文小編為大家詳細介紹“webpack如何將es6轉成es5的模塊”，內容詳細，步驟清晰，細節處理妥當，希望這篇“webpack如何將es6轉成es5的模塊”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

配置方法：1、用導入的方法把ES6代碼放到打包的js代碼文件中；2、利用npm工具安裝babel-loader工具，語法“npm install -D babel-loader @babel/core @babel/preset-env”；3、創建babel工具的配置文件“.babelrc”并設定轉碼規則；4、在webpack.config.js文件中配置打包規則即可。

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

萬惡的IE遺臭萬年仍然需要填坑

• ie標準對html/css甚至js的規范簡直相差甚遠，所以，一般要解決的兼容問題很大一部分是為了解決ie的不兼容，雖然目前流行的ES6語法及規范將IE的考慮拋棄掉，默認放棄對IE的治療，但是IE的兼容仍然是個問題！即使IE的使用率已經不到1%的市場占比。

• 我們使用著舒服的ES6規范但是為IE又很頭疼怎么辦呢？Webpack開發了非常厲害的打包轉換功能：轉ES5！

隨便來個ES6代碼

• 就寫個let聲明和遍歷：

console.log("webpack 1");
let date = ["hello", "world", "this", "is", "es6", "code"];

((theDate) => {
    theDate.forEach(item => console.log(item));
})(date)

這是在Chrome瀏覽器里的結果

這是在火狐瀏覽器的結果：

這是ie11瀏覽器的結果：

完全不出意料哈！我們來轉一轉。

• 這里我們先做一個修改，用導入的辦法把ES6代碼挪到打包的js代碼文件中：
  原index.js:

console.log("webpack 1");
let fun = () => {
    let date = ["hello", "world", "this", "is", "es6", "code"];
    date.forEach(item => console.log(item));
}
//fun() //結果依然剛才一樣
export default fun;//es6導出函數，es6模塊化知識

Can’t find @babel/core 問題

• 以前安裝打包需要的插件或者說是工具包：

npm install babel-core babel-loader babel-preset-es2015 --save-dev
#因為是開發測試環境，就加了dev，各自根據需要更改保存參數

• 沒錯，因為版本兼容問題，最新的8.x版本babel-loader讀取babel-core發生了改變，因此我們要安裝對應匹配的版本：

#webpack 4.x | babel-loader 8.x | babel 7.x 最新版本
npm install -D babel-loader @babel/core @babel/preset-env
#webpack 4.x | babel-loader 7.x | babel 6.x 版本
npm install -D babel-loader@7 babel-core babel-preset-env webpack

• 我這里使用的是7.x版本：

• 創建babel工具的配置文件：.babelrc，設定轉碼規則

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

• webpack.config.js配置打包規則：

module: {
    rules: [{
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
    }]
}

• webpack執行，生成test.html

• 瀏覽器的效果：

Chrome

IE

代碼成功在IE上運行了

• 我們再看看打包轉換成的es5長啥樣

讀到這里，這篇“webpack如何將es6轉成es5的模塊”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。