Не используйте бездумно ES78910 в своих проектах~

Vue.js
Не используйте бездумно ES78910 в своих проектах~

Если у меня есть история, у тебя есть звезда~

предыстория истории

В обзоре кода я нашел этот код в нашем проекте (проект основан на vue-cli 3)MDN

[1, 2, [3, 4, [5, 6]]].flat(Infinity); // [1, 2, 3, 4, 5, 6]

Ммммм~ Многомерный массив сглажен, это круто и ослепительно~

посмотрю еще на совместимость..

图片

прошу прощения..

Сначала наверстать волну взаимного противостояния

Я: Брат, твой API — новая функция ES2019, это абсолютно невозможно~

图片

Коллега: У меня есть vue-cli 3~ Он упаковал Babel, мой большой vue-cli 3 непобедим~

Я: Я... я очень хочу вскочить и ударить его по коленке~ Это кажется неубедительным, просто произнеся одно предложение, пришло время показать настоящую технику..

разговаривает (спит) обслуживает коллегу

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Это основной пакет для транскодирования Babel, который реализует некоторые полифиллы ECMAScript до 2019 года с использованием API es5 и обеспечивает загрузку по требованию, не загрязняя глобальное пространство имен.

@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 (и необязательными полифиллами браузера), требуемыми целевой средой. Это не только делает вашу жизнь проще, но и размер пакета JavaScript тоже меньше!

Давайте кратко рассмотрим два основных элемента конфигурации.

useBuiltIns

"usage" | "entry" | false, defaults to false.

(предоставляет «использование» | «вход» | false три элемента конфигурации, значение по умолчанию — false)

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

(Эта конфигурация используется для определения того, как @babel/preset-env обрабатывает полифиллы)

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.

(При использовании конфигурации использования или ввода @babel-preset-env будет напрямую (запись) ссылаться (или импортировать по запросу (использование) на модуль 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 настроена как запись или использование, и убедитесь, что @babel/preset-env вводит правильный импорт для вашей версии core-js)

Хорошо, давайте посмотрим на конфигурацию Babel Vue-cli 3~.

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

Вы можете видеть, что набор предустановок, используемый в vue-cli 3, представляет собой пакет @vue/app, мы находим package.json @vue/app в node_modules.

图片

// package.json

"dependencies":{

  "@babel/preset-env": "^7.0.0 < 7.4.0",

  "core-js": "^2.6.5"
}

Вы можете видеть, что в зависимостях есть версии core-js 2.x и @babel/preset-env ~

Откройте index.js @vue/app

//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-preset-app, используемый vue-cli, инкапсулирует @babel/preset-env` и настраивает

useBuiltIns: 'usage';

corejs не настроен, поэтому значение по умолчанию равно 2.

useBuiltIns: 'usage';
corejs: 2;

Глядя на это таким образом, в сочетании со знаниями, о которых мы говорили выше, следует ли конвертировать flat в es5?

Упрямый, я открыл core-js на github

图片

Странно, я не нашел реализации плоского API в core-js 2.65.

图片

Моя жажда знаний взорвалась, я пролистал документацию core-js@3 и нашел следующий отрывок

图片

Было обнаружено, что API Array.prototype.flat был добавлен в core-js@3.

图片

В заключение

vue-cli 3 использует версию core-js2.x, поэтому API Arrary.prototype.flat нельзя избежать.

упражняться

Кажется, это не соответствует моему стилю - придумывать теорию без практики~

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
      }
    ]
  ]
});
// 用core-js@3 来看看转码后的结果
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);

хорошо~ Идеальный вывод проверки!кодовый адрес

vue-cli будет поддерживать core-js 3 в версии 4

图片

думать

Нельзя отрицать, что vue-cli — очень хороший каркас, он обеспечивает очень хорошее инженерное решение.

сборка веб-пакета

вавилонская компиляция

postcss совместимый

...

Я часто вижу умелое использование строительных лесов xxx в некоторых резюме. Должны ли мы уметь использовать строительные леса?

Когда мы наслаждаемся удобством и удовольствием, которые приносят инструменты, должны ли мы также думать о том, как много мы знаем о фронтенд-инжиниринге?

Категории