If I have a story, do you have a star

The story background

In a code review, I found this code MDN in our project (which was created based on VUe-CLI 3)

[1.2[3.4[5.6]]].flat(Infinity); // [1, 2, 3, 4, 5, 6]
Copy the code

HMMM ~ multi-dimensional array flatness, very cool to blow up ~

Let me check compatibility again..

Excuse me..

Imagine a wave of insults

Me: elder brother, your API is a new feature of ES2019, you can’t do it

Colleague: I have vue-CLI 3. He has Babel wrapped. I have vue-CLI 3

I: I… I want to jump up and hit him in the knee. It’s time to show real skills.

Say (sleep) to a colleague

core-js

Modular standard library for JavaScript. Includes polyfills for ECMAScript up to 2019: promises, symbols, collections, iterators, typed arrays, many other features, ECMAScript proposals, some cross-platform WHATWG / W3C features and proposals like URL. You can load only required features or use it without global namespace pollution.

Core-js is the core package for Babel transcoding that implements some ECMAScript to 2019 polyfills using the ES5 API and provides on-demand loading without polluting the global namespace.

@babel/preset-env

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

@babel/ PRESET -env is a collection of smart plug-ins that allow you to use the latest JavaScript without micromanaging the API transformations (and optional Browser polyfills) required by the target environment. Not only does this make your life easier, but the JavaScript package is also smaller!

Let’s take a quick look at two of its core configuration items.

useBuiltIns

“usage” | “entry” | false, defaults to false.

(provide “usage” | | “entry” false three configuration items, the default value is false)

This option configures how @babel/preset-env handles polyfills.

(This configuration item is used to determine how @babel/preset-env will handle polyfills)

When either the usage or entry options are used, @babel-preset-env will add direct references to core-js modules as bare imports (or requires). This means core-js will be resolved relative to the file itself and needs to be accessible.

(When a Usage or entry configuration item is used,@babel-preset-env will directly reference (or be introduced as needed) the core-js module, which means that core-js will parse the file itself)

Since @babel/ Polyfill was deprecated in 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.

(Since @babel/ Polyfill was deprecated in 7.4.0, we recommend adding core-js directly and setting the version via the Corejs option.)

corejs

2, 3 or { version: 2 | 3, proposals: boolean }, defaults to 2.

(Specify corejs version,2 or 3, default 2)

This option only has an effect when used alongside useBuiltIns: usage or useBuiltIns: entry, and ensures @babel/preset-env injects the correct imports for your core-js version.

(This option only works if useBuiltIns option is set to Entry or Usage, and make sure @babel/preset-env infuses correct introductions for your core-JS version)

Ok, next let’s look at a ha vue-CLI 3 Babel configuration ~

// babel.config.js
module.exports = {
  presets: ['@vue/app']};Copy the code

You can see that the default set for vue-CLI 3 is the @vue/app wrapper. We can find the package.json for @vue/app in node_modules

// package.json

"dependencies": {"@babel/preset-env": "^ 7.0.0 < 7.4.0"."core-js": "^ 2.6.5." "
}
Copy the code

There are core-js 2.x versions and @babel/preset-env ~ in the dependencies

Open index.js in @vue/app

//index.js part of the code

const envOptions = {
  spec,
  loose,
  debug,
  modules,
  targets,
  useBuiltIns, // Highlight, where the value is defined as 'usage'
  ignoreBrowserslistConfig,
  configPath,
  include,
  exclude: polyfills.concat(exclude || []),
  shippedProposals,
  forceAllTransforms
};

presets.unshift([require('@babel/preset-env'), envOptions]);
Copy the code

From the above, we can conclude that VUe-PRESET -app used by VUe-CLI encapsulates @babel/preset-env ‘and is configured

useBuiltIns: 'usage';
Copy the code

Corejs is not configured, so the default value is 2

useBuiltIns: 'usage';
corejs: 2;
Copy the code

Will Flat be converted to ES5? Sex, sex, smack in the face?

Obstinately, I went to Github and opened Core-JS

Oddly enough, I didn’t find an implementation of the Flat API in Core-JS 2.65.

Eager to learn, I turned to core-js@3 and found the following paragraph

The array.prototype. flat API was added at core-js@3.

conclusion

Vue-cli 3 uses core-js2. X, so you can’t escape the Arrary. Prototype. flat API.

practice

It doesn’t seem to be my style to come up with theory without practice

npm init -y

npm i @babel/core @babel/preset-env -D
Copy the code
const babel = require('@babel/core');

const code = `[1, 2, 3, 4, [5, 6, [7, 8]]].flat(Infinity); `;
const ast = babel.transform(code, {
  presets: [['@babel/preset-env',
      {
        useBuiltIns: 'usage'.corejs: 2}}]]);// use core-js@2 to see the result of transcoding
console.log(ast.code);

// "use strict";

// [1, 2, 3, 4, [5, 6, [7, 8]]].flat(Infinity);
Copy the code
const babel = require('@babel/core');

const code = `[1, 2, 3, 4, [5, 6, [7, 8]]].flat(Infinity); `;
const ast = babel.transform(code, {
  presets: [['@babel/preset-env',
      {
        useBuiltIns: 'usage'.corejs: 3}}]]);// use core-js@3 to see the result of transcoding
console.log(ast.code);

// "use strict";

// require("core-js/modules/es.array.flat");

// require("core-js/modules/es.array.unscopables.flat");

// [1, 2, 3, 4, [5, 6, [7, 8]]].flat(Infinity);
Copy the code

Ok ~ perfect verification conclusion! The code address

Vue-cli will support core-JS 3 in Version 4

thinking

Vue-cli is undeniably an excellent scaffold that provides a nice engineering solution.

Webpack build

Babel compilation

Postcss compatible

.

I often see proficiency in XXX scaffolding on some resumes, should we be proficient in the use of scaffolding?

Should we be thinking about what we know about front-end engineering while enjoying the convenience and pleasure of tools?