The Babel-polyfill and babel-runtime of the front-end Engineering-webpack article (III.)

About Babel

If we do not configure some rules, Babel only converts the new JavaScript syntax (syntax) instead of the new API, such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Global objects such as Promise, as well as some methods defined on global objects (such as object.assign), are not transcoded. So, when such a code appears:

const key = ‘babel‘  const obj = {      [key]: ‘foo‘,}

Babel is compiled by default into the following code

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‘ }));  

We can see that there is one more helper function named in the code, _defineProperty but this helper function only takes effect in the current module, so if the same syntax is used in other modules, there will be a lot of duplicate code after compilation.

Babel-polyfill

The principle is that when the operating environment does not implement some of the methods, Babel-polyfill will make it compatible. However, there is also a drawback, that is, it will pollute the global variables, and the project will increase the volume after packaging, because the entire dependency package is also built in. Therefore, it is not recommended to use in some method class libraries.

Usage

1. `npm install --save babel-polyfill`2. 在应用的入口引用，以确保它能够最先加载：`import "babel-polyfill";` 或者`require("babel-polyfill");`

Babel-runtime

To not contaminate global objects and built-in object prototypes, you want to experience the thrill of using fresh syntax. Can be used in conjunction with babel-runtime the babel-plugin-transform-runtime . For example, the current operating environment is not supported promise , can be obtained by ingestion babel-runtime/core-js/promise promise , or by babel-plugin-transform-runtime automatically rewriting your promise . Perhaps some people will wonder why there are two runtime plugins, in fact, there are historical reasons: just beginning to start only babel-runtime plug-ins, but it is inconvenient to use, in the code directly into the helper function, meaning can not be shared, resulting in the final packaging of the file There are many duplicate helper code. So, Babel again babel-plugin-transform-runtime , this module will rewrite our code, such as Promise rewrite it _Promise (just for example) and then introduce a _Promise helper function. This avoids the pain of repeating the packaging code and manually introducing the module.

Usage

1. `npm install --save-dev babel-plugin-transform-runtime`2. `npm install --save babel-runtime`3. 写入 `.babelrc`

{  "plugins": ["transform-runtime"]}

Once the plugin is enabled babel-plugin-transform-runtime , the Babel babel-runtime following tool functions are used, and the translation code is 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‘);  

Insufficient

babel-runtimeYou cannot transcode an instance method, such as this code:

‘!!!‘.repeat(3);  ‘hello‘.includes(‘h‘);  

This can only be transcoded by Babel-polyfill, because Babel-polyfill is added directly to the prototype chain.

The Babel-polyfill and babel-runtime of the front-end Engineering-webpack article (III.)