webpack如何將es6轉(zhuǎn)成es5的模塊

本文小編為大家詳細(xì)介紹“webpack如何將es6轉(zhuǎn)成es5的模塊”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“webpack如何將es6轉(zhuǎn)成es5的模塊”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

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

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

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

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

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

隨便來個(gè)ES6代碼

• 就寫個(gè)let聲明和遍歷：

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

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

這是在Chrome瀏覽器里的結(jié)果

這是在火狐瀏覽器的結(jié)果：

這是ie11瀏覽器的結(jié)果：

完全不出意料哈！我們來轉(zhuǎn)一轉(zhuǎn)。

• 這里我們先做一個(gè)修改，用導(dǎo)入的辦法把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() //結(jié)果依然剛才一樣
export default fun;//es6導(dǎo)出函數(shù)，es6模塊化知識(shí)

Can’t find @babel/core 問題

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

npm install babel-core babel-loader babel-preset-es2015 --save-dev
#因?yàn)槭情_發(fā)測試環(huán)境，就加了dev，各自根據(jù)需要更改保存參數(shù)

• 沒錯(cuò)，因?yàn)榘姹炯嫒輪栴}，最新的8.x版本babel-loader讀取babel-core發(fā)生了改變，因此我們要安裝對應(yīng)匹配的版本：

#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版本：

• 創(chuàng)建babel工具的配置文件：.babelrc，設(shè)定轉(zhuǎn)碼規(guī)則

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

• webpack.config.js配置打包規(guī)則：

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

• webpack執(zhí)行，生成test.html

• 瀏覽器的效果：

Chrome

IE

代碼成功在IE上運(yùn)行了

• 我們再看看打包轉(zhuǎn)換成的es5長啥樣

讀到這里，這篇“webpack如何將es6轉(zhuǎn)成es5的模塊”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。