一、前言

上一篇講到如何配置一個(gè)基本的開發(fā)環(huán)境。本篇將介紹對于項(xiàng)目中 JS 文件的處理。

二、babel-loader

index.js

//?箭頭函數(shù)
const?add?=?(a,?b)?=>?a?+?b;

//?Promise?對象
const?promise1?=?new?Promise((resolve,?reject)?=>?{
??setTimeout(()?=>?{
????resolve(add(1,?2));
??},?1000);
});

const?promise2?=?new?Promise((resolve,?reject)?=>?{
??setTimeout(()?=>?{
????resolve(add(3,?4));
??},?1000);
});

const?promise3?=?new?Promise((resolve,?reject)?=>?{
??setTimeout(()?=>?{
????resolve(add(5,?6));
??},?1000);
});

Promise.all([promise1,?promise2,?promise3]).then(values?=>?{
??console.log(values);?//?[3,?7,?11]
});

//?實(shí)例方法：Array.prototype.includes()
const?arr?=?[1,?2,?3,?4,?5];
console.log(arr.includes(3));?//?true

const?root?=?document.getElementById('root');
root.innerHTML?=?add(1,?3);
復(fù)制代碼

有一些版本的瀏覽器對于JS新的語法(例如 ES6+)的支持不好，這時(shí)就需要將新的語法轉(zhuǎn)換成 ES5 標(biāo)準(zhǔn)的語法，讓瀏覽器正常識別它們，保證程序的穩(wěn)定運(yùn)行。

為了實(shí)現(xiàn)這種轉(zhuǎn)換，我們該怎么辦呢？用 Babel，它會把新語法轉(zhuǎn)換為舊語法。

1. 依賴安裝

安裝：

npm?install?-D?babel-loader?@babel/core?@babel/preset-env
復(fù)制代碼

2. Loader 配置

webpack.config.js

module:?{
??rules:?[
????{
??????test:?/\.m?js$/,
??????exclude:?/node_modules/,
??????use:?{
????????loader:?'babel-loader'
??????}
????}
??]
}
復(fù)制代碼

對于 babel 的配置，我們一般放在 babel.config.json 中，在根目錄中新建 babel.config.json。

三、Babel 的配置

1. 一般情況下的 babel 配置

babel.config.json

{
??"presets":?[
????["@babel/preset-env",?{
??????"useBuiltIns":?"usage",?//?按需引入?corejs?中的模塊?
??????"corejs":?3,?//?核心?js?版本
??????"targets":?">?0.25%,?not?dead"?//?瀏覽器支持范圍
????}]
??]
}
復(fù)制代碼

還需要下載的依賴：

npm?i?core-js@3?--save
復(fù)制代碼

注意：?必須要配置?useBuiltIns，如果不配置，babel 將不會處理 Promise、Map、Set、Symbol 等全局對象；corejs?也要同時(shí)配置，2 的版本可以處理全局對象，但實(shí)例方法并不處理，所以這里用 3 的版本。

2. 最佳的 babel 配置

如果在寫一個(gè)庫時(shí)，最好添加上插件 ——?babel/plugin-transform-runtime，配置如下：

{
??"presets":?[
????["@babel/preset-env",?{
??????"targets":?">?0.25%,?not?dead"
????}]
??],
??"plugins":?[
????//?不污染全局，在運(yùn)行時(shí)加載
????["@babel/plugin-transform-runtime",?{
??????"corejs":?3
????}]
??]
}
復(fù)制代碼

還需要下載的依賴：

npm?install?--save-dev?@babel/plugin-transform-runtime
npm?install?--save?@babel/runtime
npm?install?--save?@babel/runtime-corejs3
復(fù)制代碼

四、最后的備注

Babel 版本更新后，很多內(nèi)容已經(jīng)發(fā)生變化，官方文檔也是晦澀難讀，而中文網(wǎng)上的文章很多都已經(jīng)過時(shí)，好在我看到了一位大佬的文章，這才讓我對 @babel/preset-env 和 @babel/plugin-transform-runtime 有了基本的認(rèn)識。文章 link 放在文末，請自行閱讀。

1. @babel/preset-env just transforms code with?syntax, if we don’t config?useBuiltIns.
2. @babel/transform-runtime can provide re-use helpers, but?don’t?polyfill by default.
3. Most situation best config: use @babel/preset-env transforms syntax. use @babel/transform-runtime avoid duplicate code, and config corejs: 3 to polyfill.