If I have a story, do you have a star ~
story background
In a code review, I (based vue-cli 3 to create a project) in our project found this code MDN
. [1, 2, [3, 4, [5, 6]]] flat (Infinity); // [1, 2, 3, 4, 5, 6] copy the code
En en ~ multidimensional array flat, hanging fried very cool day to pull Pa
I Made compatibility ..
excuse me..
First make the brain wave of mutual hate pictures
Me: my brother, you are ES2019 new feature this API, ah, should be avoided ah ~
Colleague: I have a vue-cli 3 ~ ah ah Babel him a good package, I large vue-cli 3 invincible ah ~
Me: I ... I really want to jump up and hit him in the knee with a word ah ~ seems to be no convincing ah, it is the real time performance of the technology ..
Say (sleep) service colleagues
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 babel transcoding, which uses es5 API implements some ECMAScript polyfills to 2019, and provides on-demand load and use it 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 是一个智能插件集合,允许您使用最新的 JavaScript ,而不需要对目标环境所需的API转换(以及可选的 browser polyfills)进行微管理。这不仅使您的生活更轻松，而且 JavaScript 包也更小!
下面我们简单了解一下它的其中两个核心配置项.
useBuiltIns
"usage" | "entry" | false, defaults to false.
(提供"usage" | "entry" | false 三个配置项,默认值为 false)
This option configures how @babel/preset-env handles polyfills.
(这个配置项用来决定@babel/preset-env 如何处理 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.
(当使用 usage 或 entry 配置项时,@babel-preset-env 将直接(entry)引用(或按需(usage)引入)core-js 模块,这意味着 core-js 将对文件本身进行解析)
Since @babel/polyfill was deprecated in 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.
(由于@babel/polyfill 在 7.4.0 中被弃用，我们建议直接添加 core-js 并通过 corejs 选项设置版本。)
corejs
2, 3 or { version: 2 | 3, proposals: boolean }, defaults to 2.
(指定 corejs 版本,2 或 3,默认值为 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.
(此选项只有在 useBuiltIns 选项配置为 entry 或 usage 时才生效,并确保@babel/preset-env 为您的 core-js 版本注入正确的引入)
Ok,接下来我们来看一哈 Vue-cli 3 的 babel 配置～
// babel.config.jsmodule.exports = {
presets: ['@vue/app']
};
复制代码
可以看到 vue-cli 3 这边用的预设集合是自己封装的@vue/app,我们在 node_modules 找到@vue/app 的 package.json
// package.json"dependencies":{ "@babel/preset-env": "^7.0.0 < 7.4.0", "core-js": "^2.6.5"}
复制代码
可以看到依赖里有 core-js 2.x 版本和@babel/preset-env ～
打开@vue/app 的 index.js
//index.js 部分代码
const envOptions = { spec, loose, debug, modules, targets, useBuiltIns, // 划重点,此处值 已定义为 'usage' ignoreBrowserslistConfig, configPath, include, exclude: polyfills.concat(exclude || []), shippedProposals,
forceAllTransforms
};presets.unshift([require('@babel/preset-env'), envOptions]);复制代码
由上,我们可以得出结论,vue-cli 使用的 vue-preset-app 封装了@babel/preset-env`,且配置
useBuiltIns: 'usage'; 复制代码
corejs 没做配置,所以为默认值 2
useBuiltIns: 'usage';corejs: 2; 复制代码
这么一看,结合我们上面所讲知识,flat 是应该会被转成 es5 咯 ? 啪啪啪,打脸？
倔强的我上 github 打开了 core-js
奇怪的是,我在 core-js 2.65 版本里并没有找到 flat API的实现.
求知欲爆炸的我,翻了 core-js@3 的文档,找到了以下这段话
发现 Array.prototype.flat API是在 core-js@3 才加入的。
结论
vue-cli 3 使用的是 core-js2.x 版本,所以并不能转义 Arrary.prototype.flat 这个API。
实践
得出理论 不实践一波 好像不符合我的风格啊～
npm init -y
npm i @babel/core @babel/preset-env -D
复制代码
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
}
]
]
});// 用core-js@2 来看看转码后的结果
console.log(ast.code);// "use strict";// [1, 2, 3, 4, [5, 6, [7, 8]]].flat(Infinity);
复制代码
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
}
]
]
}); // with core-js @ 3 to see the results transcoded
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);
duplicated code
ok ~ perfect verification conclusion! Code address
vue-cli will support version 4 core-js 3
Think
Admittedly vue-cli is a very good scaffold, which provides a very nice engineered solutions.
webpack building
babel compilation
postcss compatible
...
I often see some resume xxx skilled use of scaffolding, should we be skilled to use scaffolding right?
When we enjoy convenient tool gives us with pleasure, is not it also should ask yourself how much of the front-end engineering to understand it?