background

In the process of project iteration, due to the requirement of compatibility with IE, two plug-ins babel-Polyfill and Babel-Runtime were used to solve the problem according to the document. But for the enmity and enmity between the two, but do not know very much, they intend to explore.

About Babel

If we don’t configure some rules, Babel by default only converts the new JavaScript syntax, not the new API, Global objects such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, and Promise, as well as methods defined on global objects such as Object.assign, do not transcode. So, when code like this appears:

const key = 'babel'
const obj = {
    [key]: 'foo',}Copy the code

Babel compiles to the following code by default

function _defineProperty(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, { value: value, enumerable: true.configurable: true.writable: true });
    } else {
        obj[key] = value;
    }
    return obj;
}

var key = 'babel';
var obj = _defineProperty({}, key, Object.assign({}, { key: 'foo' }));
Copy the code

We can see a helper function named _defineProperty added to the code, but this helper function only works in the current module, so other modules with the same syntax will have a lot of duplicate code when compiled.

babel-polyfill

The idea is that babel-Polyfill is compatible with methods that are not implemented in the runtime environment. However, there is a downside to this, which is that it can pollute global variables, and the size of the project will become much larger once it is packaged, because the entire dependency package will be included. It is not recommended for use in some method libraries.

usage

1. `npm install --save babel-polyfill` 2. Reference in the entry of the application to ensure that it is loaded first: 'import "babel-polyfill"; ` or ` the require (" Babel - polyfill "); `Copy the code

babel-runtime

Not to contaminate global objects and built-in object prototypes, but to experience the thrill of using a new syntax. You can use babel-Runtime and babel-plugin-transform-Runtime together. For example, if the current runtime environment does not support promises, you can retrieve promises by introducing babel-Runtime /core-js/ Promise, or rewrite your promises automatically with babel-plugin-transform-Runtime. Some may wonder why there are two Runtime plugins, but there is a historical reason: At first there was only the babel-Runtime plugin, but it was awkward to use. Introducing helper functions directly into the code meant that they could not be shared, resulting in a lot of duplicate helper code in the final package. So, Babel developed the babel-plugin-transform-Runtime module, which would rewrite our code, such as rewriting Promise to _Promise (metaphorically) and introducing the _Promise helper function. This avoids the pain of repackaging code and manually importing modules.

usage

1. `npm install --save-dev babel-plugin-transform-runtime` 2. `npm install --save babel-runtime` 3. Write `. Babelrc `Copy the code
{
  "plugins": ["transform-runtime"]}Copy the code

When the plugin babel-plugin-transform-runtime is enabled, Babel uses the tool functions provided by babel-Runtime as follows:

'use strict';

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var key = 'babel';
var obj = (0, _defineProperty3.default)({}, key, 'foo');
Copy the code

insufficient

Babel-runtime cannot transcode instance methods, such as this:

'!!!!!! '.repeat(3);
'hello'.includes('h');
Copy the code

This can only be transcoded with Babel-polyfill, because babel-polyfill adds methods directly to the prototype chain.

And more

As history progresses, the new generation babel-prenset-env is very powerful. Check out 😜

Refer to the link

  • Babel tutorial
  • Babel Family bucket · Issue #20 · Brunoyang /blog · GitHub
  • The Runtime transform Babel
  • Polyfill, Babel

Free reprint – Non-commercial – Non-derivative – Keep attribution (Creative Commons 3.0 License)