FXFX.GRID

从 @vue/cli-plugin-babel 理解 babel 和其各种插件

在@vue/cli生成的项目vue2项目中, 它会自动的帮助我们完成babel的配置. 而配置项则非常的简单, 就是使用了@vue/cli-plugin-babel则一插件, 这个插件是官方的@vue/cli插件. 该插件主要是对babel配置的封装, 让用户有开箱即用的vue开发体验. 本文会从该插件开启讨论, 并最终深入到babel以及一些babel插件.

与本文相关的包

#入口 - index.js

为@vue/cli插件机制的入口文件. 它会做以下事情

  • 加载项目级别的babel配置
  • 使用@vue/cli的 API 配置 Webpack. 在这里就是对 Webpack 的 module 进行配置, 并载入babel-loader.

而主要的babel配置, 这主要放在了@vue/babel-preset-app这个包中.

#babel-preset-app

该包根据多种不同的情况下会输出不同babel配置. 在Vue2且不做配置的情况下, 其将会输出这样的babel配置

{
    "presets":[
        [
            "@babel/preset-env",
            {
            }
        ]
    ]
    "plugins":[
        "@babel/plugin-syntax-dynamic-import", //解析动态 import(), 在 preset-env(ES2020)中内建
        "@babel/plugin-proposal-decorators", //转换 class 和 object 的装饰器到 ES5
        "@babel/plugin-proposal-class-properties", //转换静态类属性以及用属性初始化器语法声明的属性, 在 preset-env(ES2022)中内建
        "@babel/plugin-transform-runtime"
    ]
}

这里重点说下@babel/plugin-transform-runtime

Babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it. This duplication is sometimes unnecessary, especially when your application is spread out over multiple files.

This is where the @babel/plugin-transform-runtime plugin comes in: all of the helpers will reference the module @babel/runtime to avoid duplication across your compiled output. The runtime will be compiled into your build.

Another purpose of this transformer is to create a sandboxed environment for your code. If you directly import core-js or @babel/polyfill and the built-ins it provides such as Promise, Set and Map, those will pollute the global scope. While this might be ok for an app or a command line tool, it becomes a problem if your code is a library which you intend to publish for others to use or if you can't exactly control the environment in which your code will run.

The transformer will alias these built-ins to core-js so you can use them seamlessly without having to require the polyfill.

See the technical details section for more information on how this works and the types of transformations that occur.

摘自 https://babeljs.io/docs/en/babel-plugin-transform-runtime

上文说明, 使用该插件后, 所有的helpers将会从@babel/runtime引用(预示着我们需要安装@babel/runtime, 文档中也指出我们需要把@babel/runtime安装到依赖项而非开发依赖, 这是因为需要保证使用该库的项目能正确的得到helpers引用).

同时, 它还创建了一个沙盒环境, 防止了core-js和@babel/polyfill对全局作用域造成的污染.

FXFX.THEME