babe從入門到精通

前言

前面我們寫了幾篇很長的文章去介紹babel源碼、preset-env、runtime，

在babel配置中我們可能用過@babel/polyfill、core-js、core-js-pure、@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3、@babel/plugin-transform-runtime、@babel/preset-env，當然這些都有出現在我們的文章中的，並且很詳情的說了每個應用場景，所以強烈推薦小夥伴去看一下這幾篇文章。

總結

好啦～我們今天就總結一下這些babel配置之前的聯繫，然後最後說一下在實戰項目中的一些配置建議。

@babel/polyfill

As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

也就是說在babel7.4.0之後是棄用掉的，然後現在由core-js替換，core-js可以用以下代碼來替換之前的@babel/polyfill：

//import "@babel/polyfill"; //之前的寫法
import "core-js/stable";
import "regenerator-runtime/runtime";

core-js&core-js-pure

core-js出現其實就是爲了能讓你代碼中的一些api（比如：Array.prototype.include）能夠運行，等於是在你的代碼跟瀏覽器中加入了一個墊片，所以在babel7.4.0之後所有的polyfill操作都依賴core-js，core-js-pure是core-js的另外一個版本，可以不污染全局變量，比如我們的@babel/plugin-transform-runtime插件就是依賴的core-js-pure，core-js的更多用法跟介紹大家可以看官網https://github.com/zloirock/core-js

@babel/runtime

@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3這幾個都叫“@babel/runtime”，只是每一個對應的實現不一樣，都是提供給@babel/plugin-transform-runtime插件做依賴，@babel/plugin-transform-runtime插件會根據corejs的配置做不通的runtime依賴，具體用法大家可以參考之前的幾篇文章。

@babel/plugin-transform-runtime 和 @babel/preset-env

@babel/preset-env包含了一些基本es語法轉換的插件（箭頭函數、類轉換等等），同時還支持polyfill，有usage跟entry模式，但是preset-env添加polyfill會像之前使用@babel/polyfill一樣，會污染全局變量。

@babel/plugin-transform-runtime主要是利用@babel/runtime提取了一些公共的babel幫助函數，同時也支持polyfill的添加，添加的polyfill都是以一個局部變量的形式引入，不會污染全局變量。

如果你做的是一個二方庫，然後需要被別人依賴，那麼建議使用@babel/plugin-transform-runtime來引入polyfill，因爲你要儘可能的專注於做自己的事，而不是說去影響別人，語法轉換可以使用preset-env預設，比如以下配置：

module.exports = {
    presets: [
        [
            "@babel/preset-env",
        ]
    ],
    plugins: [
        [
            "@babel/plugin-transform-runtime",
            {
                corejs: {version: 3, proposals: true},
                helpers: true,
                useESModules: true,
                regenerator: true,
                absoluteRuntime: "./node_modules"
            }
        ]
    ]
};

如果你做的是一個普通的業務項目的話，可以用preset-env來轉換語法和polyfill，然後再利用@babel/plugin-transform-runtime來引入helpers跟generator做到代碼重複利用，比如以下配置：

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                corejs: 3,
                useBuiltIns: 'usage',
            }
        ]
    ],
    plugins: [
        [
            "@babel/plugin-transform-runtime",
            {
                corejs: false,
                helpers: true,
                useESModules: false,
                regenerator: true,
                absoluteRuntime: "./node_modules"
            }
        ]
    ]
};

小夥伴思維也不要被某種方式定死，還是要根據自己項目需要靈活配置，找到自己項目最好的就可以了，說白了不管是runtime還是preset-env還是之前的@babel/polyfill，掌握原理後隨意搭配都是可以的，比如我們接下來看一下vue-cli4.1.1中是怎麼對babel配置的。

@vue/cli-service@^4.1.1

大家可以安裝一下@vue/cli-service@^4.1.1：

npm install -D @vue/cli-service@^4.1.1

然後我們找到vue-cli中對babel的配置文件，

node_modules/@vue/babel-preset-app/index.js：

const path = require('path')

const defaultPolyfills = [
  // promise polyfill alone doesn't work in IE,
  // needs this as well. see: #1642
  'es.array.iterator',
  // this is required for webpack code splitting, vuex etc.
  'es.promise',
  // this is needed for object rest spread support in templates
  // as vue-template-es2015-compiler 1.8+ compiles it to Object.assign() calls.
  'es.object.assign',
  // #2012 es6.promise replaces native Promise in FF and causes missing finally
  'es.promise.finally'
]

function getPolyfills (targets, includes, { ignoreBrowserslistConfig, configPath }) {
  const getTargets = require('@babel/helper-compilation-targets').default
  const builtInTargets = getTargets(targets, { ignoreBrowserslistConfig, configPath })

  // if no targets specified, include all default polyfills
  if (!targets && !Object.keys(builtInTargets).length) {
    return includes
  }

  const { list } = require('core-js-compat')({ targets: builtInTargets })
  return includes.filter(item => list.includes(item))
}

module.exports = (context, options = {}) => {
  const presets = []
  const plugins = []
  const defaultEntryFiles = JSON.parse(process.env.VUE_CLI_ENTRY_FILES || '[]')

  // Though in the vue-cli repo, we only use the two envrionment variables
  // for tests, users may have relied on them for some features,
  // dropping them may break some projects.
  // So in the following blocks we don't directly test the `NODE_ENV`.
  // Rather, we turn it into the two commonly used feature flags.
  if (process.env.NODE_ENV === 'test') {
    // Both Jest & Mocha set NODE_ENV to 'test'.
    // And both requires the `node` target.
    process.env.VUE_CLI_BABEL_TARGET_NODE = 'true'
    // Jest runs without bundling so it needs this.
    // With the node target, tree shaking is not a necessity,
    // so we set it for maximum compatibility.
    process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = 'true'
  }

  // JSX
  if (options.jsx !== false) {
    presets.push([require('@vue/babel-preset-jsx'), typeof options.jsx === 'object' ? options.jsx : {}])
  }

  const runtimePath = path.dirname(require.resolve('@babel/runtime/package.json'))
  const runtimeVersion = require('@babel/runtime/package.json').version
  const {
    polyfills: userPolyfills,
    loose = false,
    debug = false,
    useBuiltIns = 'usage',
    modules = false,
    bugfixes = true,
    targets: rawTargets,
    spec,
    ignoreBrowserslistConfig = !!process.env.VUE_CLI_MODERN_BUILD,
    configPath,
    include,
    exclude,
    shippedProposals,
    forceAllTransforms,
    decoratorsBeforeExport,
    decoratorsLegacy,
    // entry file list
    entryFiles = defaultEntryFiles,

    // Undocumented option of @babel/plugin-transform-runtime.
    // When enabled, an absolute path is used when importing a runtime helper after transforming.
    // This ensures the transpiled file always use the runtime version required in this package.
    // However, this may cause hash inconsistency if the project is moved to another directory.
    // So here we allow user to explicit disable this option if hash consistency is a requirement
    // and the runtime version is sure to be correct.
    absoluteRuntime = runtimePath,

    // https://babeljs.io/docs/en/babel-plugin-transform-runtime#version
    // By default transform-runtime assumes that @babel/[email protected] is installed, which means helpers introduced later than 7.0.0-beta.0 will be inlined instead of imported.
    // See https://github.com/babel/babel/issues/10261
    // And https://github.com/facebook/docusaurus/pull/2111
    version = runtimeVersion
  } = options

  // resolve targets
  let targets
  if (process.env.VUE_CLI_BABEL_TARGET_NODE) {
    // running tests in Node.js
    targets = { node: 'current' }
  } else if (process.env.VUE_CLI_BUILD_TARGET === 'wc' || process.env.VUE_CLI_BUILD_TARGET === 'wc-async') {
    // targeting browsers that at least support ES2015 classes
    // https://github.com/babel/babel/blob/master/packages/babel-preset-env/data/plugins.json#L52-L61
    targets = {
      browsers: [
        'Chrome >= 49',
        'Firefox >= 45',
        'Safari >= 10',
        'Edge >= 13',
        'iOS >= 10',
        'Electron >= 0.36'
      ]
    }
  } else if (process.env.VUE_CLI_MODERN_BUILD) {
    // targeting browsers that support <script type="module">
    targets = { esmodules: true }
  } else {
    targets = rawTargets
  }

  // included-by-default polyfills. These are common polyfills that 3rd party
  // dependencies may rely on (e.g. Vuex relies on Promise), but since with
  // useBuiltIns: 'usage' we won't be running Babel on these deps, they need to
  // be force-included.
  let polyfills
  const buildTarget = process.env.VUE_CLI_BUILD_TARGET || 'app'
  if (
    buildTarget === 'app' &&
    useBuiltIns === 'usage' &&
    !process.env.VUE_CLI_BABEL_TARGET_NODE &&
    !process.env.VUE_CLI_MODERN_BUILD
  ) {
    polyfills = getPolyfills(targets, userPolyfills || defaultPolyfills, {
      ignoreBrowserslistConfig,
      configPath
    })
    plugins.push([
      require('./polyfillsPlugin'),
      { polyfills, entryFiles, useAbsolutePath: !!absoluteRuntime }
    ])
  } else {
    polyfills = []
  }

  const envOptions = {
    bugfixes,
    corejs: useBuiltIns ? 3 : false,
    spec,
    loose,
    debug,
    modules,
    targets,
    useBuiltIns,
    ignoreBrowserslistConfig,
    configPath,
    include,
    exclude: polyfills.concat(exclude || []),
    shippedProposals,
    forceAllTransforms
  }

  // cli-plugin-jest sets this to true because Jest runs without bundling
  if (process.env.VUE_CLI_BABEL_TRANSPILE_MODULES) {
    envOptions.modules = 'commonjs'
    if (process.env.VUE_CLI_BABEL_TARGET_NODE) {
      // necessary for dynamic import to work in tests
      plugins.push(require('babel-plugin-dynamic-import-node'))
    }
  }

  // pass options along to babel-preset-env
  presets.unshift([require('@babel/preset-env'), envOptions])

  // additional <= stage-3 plugins
  // Babel 7 is removing stage presets altogether because people are using
  // too many unstable proposals. Let's be conservative in the defaults here.
  plugins.push(
    require('@babel/plugin-syntax-dynamic-import'),
    [require('@babel/plugin-proposal-decorators'), {
      decoratorsBeforeExport,
      legacy: decoratorsLegacy !== false
    }],
    [require('@babel/plugin-proposal-class-properties'), { loose }]
  )

  // transform runtime, but only for helpers
  plugins.push([require('@babel/plugin-transform-runtime'), {
    regenerator: useBuiltIns !== 'usage',

    // polyfills are injected by preset-env & polyfillsPlugin, so no need to add them again
    corejs: false,

    helpers: useBuiltIns === 'usage',
    useESModules: !process.env.VUE_CLI_BABEL_TRANSPILE_MODULES,

    absoluteRuntime,

    version
  }])

  return {
    sourceType: 'unambiguous',
    overrides: [{
      exclude: [/@babel[\/|\\\\]runtime/, /core-js/],
      presets,
      plugins
    }, {
      // there are some untranspiled code in @babel/runtime
      // https://github.com/babel/babel/issues/9903
      include: [/@babel[\/|\\\\]runtime/],
      presets: [
        [require('@babel/preset-env'), {
          useBuiltIns,
          corejs: useBuiltIns ? 3 : false
        }]
      ]
    }]
  }
}

// a special flag to tell @vue/cli-plugin-babel to include @babel/runtime for transpilation
// otherwise the above `include` option won't take effect
process.env.VUE_CLI_TRANSPILE_BABEL_RUNTIME = true

如果小夥伴讀過我們前面的文章的話，看這個配置應該沒有一點問題的，我大概說一下里面的一些配置，

vue-cli在babel的配置中用到了preset-env和runtime，

preset-env的配置：

...
 const {
    polyfills: userPolyfills,
    loose = false,
    debug = false,
    useBuiltIns = 'usage',
    modules = false,
    bugfixes = true,
    targets: rawTargets,
    spec,
    ignoreBrowserslistConfig = !!process.env.VUE_CLI_MODERN_BUILD,
    configPath,
    include,
    exclude,
    shippedProposals,
    forceAllTransforms,
    decoratorsBeforeExport,
    decoratorsLegacy,
    // entry file list
    entryFiles = defaultEntryFiles,
      ...
const envOptions = {
    bugfixes,
    corejs: useBuiltIns ? 3 : false,
    spec,
    loose,
    debug,
    modules,
    targets,
    useBuiltIns,
    ignoreBrowserslistConfig,
    configPath,
    include,
    exclude: polyfills.concat(exclude || []),
    shippedProposals,
    forceAllTransforms
  }
presets.unshift([require('@babel/preset-env'), envOptions])
  ...

可以看到，默認useBuiltIns配置是“usage”，其它的也就沒什麼了，

我們繼續看一下runtime的配置：

 // transform runtime, but only for helpers
  plugins.push([require('@babel/plugin-transform-runtime'), {
    regenerator: useBuiltIns !== 'usage',

    // polyfills are injected by preset-env & polyfillsPlugin, so no need to add them again
    corejs: false,

    helpers: useBuiltIns === 'usage',
    useESModules: !process.env.VUE_CLI_BABEL_TRANSPILE_MODULES,

    absoluteRuntime,

    version
  }])

可以看到，作爲一個業務性項目，vue直接是禁掉了runtime的corejs功能，然後當useBuiltIns不爲“usage”的時候開啓regenerator屬性，當useBuiltIns爲“usage”的時候打開了helpers函數。

vue除了用了preset-env跟runtime外還默認添加了一些插件，比如：

 plugins.push(
    require('@babel/plugin-syntax-dynamic-import'),
    [require('@babel/plugin-proposal-decorators'), {
      decoratorsBeforeExport,
      legacy: decoratorsLegacy !== false
    }],
    [require('@babel/plugin-proposal-class-properties'), { loose }]
  )

主要是爲了支持裝飾器、動態import、類屬性功能，另外就是這幾個插件太不穩定了，怕有些人不會配置或者版本號配置有問題引發的問題，所以vue乾脆直接定死了這幾個不太穩定又常用的插件。

ok！我們用四篇文章來介紹了babel，光看完就已經很費勁了，真佩服這些大牛是怎麼寫出來的😂，開源不易，寫文章也不易，覺得寫得不錯的也點點贊或者推薦推薦，同時也歡迎志同道合的小夥伴一起學習一起交流。

babe從入門到精通

前言

總結

@babel/polyfill

core-js&core-js-pure

@babel/runtime

@babel/plugin-transform-runtime 和 @babel/preset-env

@vue/cli-service@^4.1.1

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

babel源碼解析之（@babel/plugin-transform-runtime）

babe從入門到精通

前端框架系列之（eslint自定義插件）

前端框架系列之（eslint源碼解析）

babel源碼解析之（@babel/preset-env）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結