There are a lot of articles about Babel7 on the web, but most of them are not in practice, and many of them are ambiguous. This article will walk you through the input/output conversion in various configurations and give you a thorough understanding of how to configure and optimize Babel7.

The most popular one is @babel/preset-env, which, as the name implies, lets Babel have the need to compile different code according to your environment.

targets

Let’s start with the basic.babelrc configuration

{
  "presets": [["@babel/preset-env",
      {
        "targets": {
          "chrome": "58"."ie": "10"}},]],}Copy the code

Targets configuration means that Babel is required to convert code according to the compatible platform you are writing to. Here we specify IE10 as the lowest version we want to support. See the output of es6 code below.

Input: SRC/main. Js

const a = () => {}
Copy the code

Output: dist/main. Js

var a = function a() {};
Copy the code

Here, the code is completely converted because IE10 does not support ES6 syntax. If we remove the bar from IE10, since higher versions of Chrome support most of the ES6 syntax, the code will not be converted.

Browserlist here is a specific configurable list that you can configure for your own project’s compatibility requirements.

useBuiltIns

Let’s start with a simple line of code

a.includes(1);
Copy the code

As an instance method of array, includes is not supported in some browsers. Babel’s default conversion does not deal with such scenarios, including WeakMap, WeakSet, Promise and other newly introduced classes of ES6. So we need Babel-Polyfill to patch our instance methods and so on.

In many projects we’ll see a babel-Polyfill package required at the top of the main.js entry of the project, or an array of webpack entries specified. The first entry introduces the babel-Polyfill package, which is fine and safe. However, there are many scenarios where we may only use a small number of apis that require Polyfill, and it may not be cost-effective to introduce the entire package. Babel provides us with a great solution, useBuiltIns, for example.

{
  "presets": [["@babel/preset-env",
      {
        "useBuiltIns": "usage"."targets": {
          "chrome": "58"."ie": "10"}},]],}Copy the code

Input: SRC/main. Js

a.includes(1)
Promise.reject()
Copy the code

Output: dist/main. Js

require("core-js/modules/es6.promise");

require("core-js/modules/es7.array.includes");

require("core-js/modules/es6.string.includes");

a.includes(1);
Promise.reject();
Copy the code

Babel did the code analysis for us, and then introduced the individual patches where polyfill was needed, thus introducing ~ on demand

@babel/plugin-transform-runtime

This plugin helps us to reference some of Babel’s helper methods by writing directly to code and importing modules on demand. Let’s first look at our transformation to ES6 classes without using this plugin.

Input: SRC/main. Js

class A {}
Copy the code

Output: dist/main. Js

function _classCallCheck(instance, Constructor) { if(! (instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var A = function A() {
  _classCallCheck(this, A);
};
Copy the code

This looks fine, but what if a lot of modules use class syntax? The helper function _classCallCheck is written multiple times, taking up meaningless space. The solution is to introduce @babel/ plugin-transform-runtime.babelrc

{
  "presets": [["@babel/preset-env",
      {
        "useBuiltIns": "usage"."targets": {
          "chrome": "58"."ie": "10"}},]]."plugins": [
    "@babel/plugin-transform-runtime"]},Copy the code

Input: SRC/main. Js

class A {}
Copy the code

Output: dist/main. Js

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var A = function A() {
  (0, _classCallCheck2.default)(this, A);
};
Copy the code

This solves the problem of the auxiliary function writing repeatedly.

conclusion

For versions of babel7, preset-env is used for on-demand conversion, useBuiltIn is used for on-demand introduction of babel-polyfill, transform-Runtime is used for on-demand introduction of Babel auxiliary functions.

The original link

Welcome to star