This is a series of MDH weekly articles. You can subscribe by searching “Yunqian” on wechat.

Language features, TC39, patches, extensions and ecology, slow, what comes to mind?

Babel is designed to allow developers to use ECMAScript proposals in advance. In addition, we use it for patching, Code mods, file features, constraints and bottlenecks, magic features such as Auto CSS modules, etc

3. Language features are officially provided by Babel and consist of many plug-ins, which belong to different stages from Stage 0 to 3. Preset -env does not contain language features below 3. So preset-env + preset to a hand-selected stage 3 feature is usually used

4, the language features are divided into two classes, compiler class and patch class. [1, 2, 3].map(function (n) {return n + 1}) The latter such as [1, 2, 3].includes(1) includes requires additional array.prototype. includes for unsupported browsers, and some features require a combination of both

5. Compiling language features generates a lot of helper code, such as inherits, setPrototypeOf, createSuper, getPrototypeOf, classCallCheck, etc. Babel is compiled at file level, resulting in a lot of duplicate code. The solution is plugin-transform-runtime + @babel/runtime, which encapsulates the above auxiliary functions. Plugin-transform-runtime makes the compiled product use @babel/runtime

6. Plugin-transform-runtime should not be configured with corejs, regardless of project or component. And you can think about why, is that a question for this article

7. Two versions of Babel are available, implemented through targets configuration + Preset -env useBuiltIns configuration. The two versions correspond to entry and Usage values respectively, and the former replaces core-js import with feature list. The latter introduces a list of features used by use

8. Babel as a compiler should not handle modules conversions, such as ESM to CJS or SystemJS. This should be handled by Bundler, who often relies on ESM modules for tree-shaking. So modules in preset-env is a preset configuration, just set it to false all the time

9, slow! It’s a big problem. It affects not only developer efficiency, but also engineering solutions. If node_modules were not slow and compiled with Babel, many of the problems would not exist at all. For example, the patch scheme can be cut to Usage as needed, and the overall size will be smaller; For example, partial dependence on the use of ES5 syntax caused by IE11 compatibility problems; Component publishing, for example, can be written in TS and published directly without compilation. That leaves a lot of possibilities open for rival schemes such as SWC.

Ecology is good, but there is nothing to use. Umi is currently using import, Macros, Svgr-webpack and named-asset-import. Because a lot of what Babel does can be done in the Bundler layer and makes more sense, Babel covers only the project code, Bundler covers the entire product, and remot-Console makes more sense in the Bundler layer.

Photo: Tumbao1949@ www.unsplash.com