babel7按需加載polyfill的方法是什么

本篇內(nèi)容主要講解“babel7按需加載polyfill的方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“babel7按需加載polyfill的方法是什么”吧!

babel7

babel7發(fā)布了。

在升級(jí)到 Babel 7 時(shí)需要注意幾個(gè)重大變化：

• 移除對(duì) Node.js 6 之前版本的支持；

• 使用帶有作用域的 @babel 命名空間，以防止與官方 Babel 包混淆；

• 移除年度預(yù)設(shè)，替換為 @babel/preset-env；

• 使用選擇性 TC39 個(gè)別提案替換階段提案；

• TC39 提議插件現(xiàn)在是 -proposal，而不是 -transform；

• 為某些面向用戶的包（例如 babel-loader、@babel/cli 等）在 @babel/core 中引入peerDependency。

官方提供了一個(gè)工具babel-upgrade，對(duì)于老項(xiàng)目，只需要執(zhí)行：npx babel-upgrade --write --install

useBuiltIns：usage

babel的polyfill總是比較大，會(huì)影響一些性能，而且也會(huì)有一些沒用的polyfill，怎么減少polyfill的大小呢？

babel7提供了useBuiltIns的按需加載：usage。

配置中設(shè)置useBuiltIns：usage，babel就會(huì)自動(dòng)把所需的polyfill加載進(jìn)來，不需要手動(dòng)import polyfill文件。

配置如：

{
    "presets": [
      "@babel/preset-react",
      ["@babel/env", {
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        },
        "useBuiltIns": "usage",
        "debug": true
      }]
    ],
    "plugins": ["@babel/transform-runtime"]
  }

babel提供的@babel/env全面替換es2015，stage插件。（如果用到stage的某些插件需要自行引入。個(gè)人感覺stage用起來太不方便了）。

之前的babel-preset-env/babel-preset-react全都改名為@babel/xxx，如果在babel7你還按之前的寫法，會(huì)報(bào)錯(cuò)：

Error: Plugin/Preset files are not allowed to export objects, only functions.

效果

看下useBuiltIns：usage的效果。"debug"選項(xiàng)開到true，可以看到打包的文件。

我用es6摘抄了一些語法，用來測(cè)試編譯：

const a = Object.assign({}, { a: 1 });
console.log(a);
function timeout(ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}
async function asyncPrint(value, ms) {
    await timeout(ms);
    console.log(value);
}
let s = Symbol();
typeof s;
class ColorPoint {
    constructor(x, y, color) {
      this.color = color;
    }
    toString() {
      return this.color + ' ' + super.toString(); // 調(diào)用父類的toString()
    }
  }
asyncPrint('hello world', 50);
function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
var hw = helloWorldGenerator();
console.log(hw.next());

babel編譯之后，可以看到加載的polyfill只加載了 es6.object.assign，es6.promise， es6.symbol，es7.symbol.async-iterator ， regenerator-runtime。

babel是怎么知道我們需要哪些polyfill的？

根據(jù)我們填的"targets"，babel會(huì)去查用到的api，當(dāng)前的target環(huán)境支持什么不支持什么，不支持的才加polyfill。

可以看到我們編譯后的文件已經(jīng)加了polyfill。

文件大小和性能都有很多提高。

useBuiltIns：entry

useBuiltIns：entry就沒有那么智能了，他會(huì)根據(jù)target環(huán)境加載polyfill，他需要手動(dòng)import polyfill，不能多次引入。
@babel/preset-env會(huì)將把@babel/polyfill根據(jù)實(shí)際需求打散，只留下必須的。做的只是打散。僅引入有瀏覽器不支持的polyfill。這樣也會(huì)提高一些性能，減少編譯后的polyfill文件大小。

main.js需要引入polyfill。import '@babel/polyfill';。
可以看到效果。我只截了部分polyfill依賴。

編譯后的文件引入了一堆polyfill。

最佳實(shí)踐

只用polyfill不是最完美的方案。
polyfill會(huì)額外引入一些函數(shù)，比如：

因?yàn)閜olyfill沒有babel-runtime的helper函數(shù)，在編譯async函數(shù)的時(shí)候，會(huì)引入以上的代碼asyncGeneratorStep，_asyncToGenerator。

如果你每個(gè)文件都用到了async，那么冗余的代碼將會(huì)很大。

babel-runtime

最佳方案就是在用polyfill的同時(shí)，再用babel-runtime。

babel-runtime會(huì)把asyncGeneratorStep,_asyncToGenerator等函數(shù)require進(jìn)來。從而減小冗余。

這得益于babel-runtime的helper函數(shù)。

所以最佳的配置是polyfill+babel-runtime。

如果用了react可以加@babel/preset-react。

{
    "presets": [
      "@babel/preset-react",
      ["@babel/env", {
        "targets": {
          "browsers": ["last 2 versions", "ie 11"]
        },
        "useBuiltIns": "usage"
      }]
    ],
    "plugins": ["@babel/transform-runtime"]
  }

可以看到，_asyncToGenerator2已被require。

到此，相信大家對(duì)“babel7按需加載polyfill的方法是什么”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！