Babel Vue Cli

Posted on  by admin

Configuration

babel plugin for vue-cli. Uses Babel 7 + babel-loader + @vue/babel-preset-app by default, but can be configured via babel.config.js to use any other Babel presets or plugins. By default, babel-loader excludes files inside node_modules dependencies.

If you wish to explicitly transpile a dependency module, you will need to add it to the transpileDependencies option in vue.config.js:.

Feature Rich

Cache options of babel-loader is enabled by default and cache is stored in /node_modules/.cache/babel-loader.

153 Versions

thread-loader is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting parallel: false in vue.config.js. parallel should be set to false when using Babel in combination with non-serializable loader options, such as regexes, dates and functions. These options would not be passed correctly to babel-loader which may lead to unexpected errors.

latest (a month ago) . next (a month ago) .

5.0.0-beta.7.. 5.0.0-beta.6.. 5.0.0-beta.5.. 5.0.0-beta.4.. 5.0.0-beta.3.. 5.0.0-beta.2.. 5.0.0-beta.1.. 5.0.0-beta.0.. 5.0.0-alpha.8..

Babel概述

5.0.0-alpha.7.. 5.0.0-alpha.6.. 5.0.0-alpha.5.. 5.0.0-alpha.4.. 5.0.0-alpha.3..

Injected webpack-chain Rules

  • 5.0.0-alpha.2.. 5.0.0-alpha.1..

  • 5.0.0-alpha.0.. 4.1.0-beta.0..

    4.0.0-beta.3.. 4.0.0-beta.2.. 4.0.0-beta.1.. 4.0.0-beta.0.. 4.0.0-alpha.5.. 4.0.0-alpha.4.. 4.0.0-alpha.3.. 4.0.0-alpha.2.. 4.0.0-alpha.1.. 4.0.0-alpha.0.. 3.0.0-beta.16.. 3.0.0-beta.15.. 3.0.0-beta.14.. 3.0.0-beta.13.. 3.0.0-beta.12.. 3.0.0-beta.11.. 3.0.0-beta.10.. 3.0.0-beta.9.. 3.0.0-beta.8.. 3.0.0-beta.7..

    3.0.0-beta.6.. 3.0.0-beta.5.. 3.0.0-beta.4.. 3.0.0-beta.3.. 3.0.0-beta.2.. 3.0.0-beta.1.. 3.0.0-alpha.13.. 3.0.0-alpha.12.. 3.0.0-alpha.11.. 3.0.0-alpha.10.. 3.0.0-alpha.9.. 3.0.0-alpha.8.. 3.0.0-alpha.7.. 3.0.0-alpha.6.. 3.0.0-alpha.5.. 3.0.0-alpha.4.. 3.0.0-alpha.3.. 3.0.0-alpha.2.. 3.0.0-alpha.1.. 在使用vue-cli工具生成的项目中,如果选择的是In dedicated config files,则在项目完成后,会有一个babel.config.js文件,项目中的Babel都会在这里配置。.

    简单介绍一下Babel, Babel是一个工具,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。所以 Babel 在转译的时候,会将源代码分成 语法(syntax) 和 特性(api) 两部分来处理:. syntax:类似于展开对象、optional chain、let、const 等语法。. api:类似于 [1,2,3].includes ,map等函数、方法。. 对于使用webpack的vue cli项目来说,项目脚手架生成后会自动引入babel-loader来处理代码中使用的新syntax,而对于api相关的转换,则需要引入polyfill 来处理,在babel.config.js文件中,有一个 @babel/preset-env配置,用来告诉 Babel 如何处理 api。.

    其中有一个关键配置选项 useBuiltIns,它的取值共有三个:.

    false:即不处理 api,不会自动对每个文件的api进行转换,也不会去引入polyfill。. entry:对全部文件进行api转换,并且需要在入口文件中手动引入import from @babel/polyfill。.

    • usage:对api的转换采用按需加载,即用到哪个方法就自动引入对应的转换代码,不会全量的引入polyfill,无需在页面入口手动引入import from @babel/polyfill。.

    • 其中false是默认值,一般用的比较少,而@babel/polyfill在Babel 7.4之后分成了两个库core-js和regenerator-runtime,所以需要引入这两个库来代替,一般情况下使用usage是最合适的,在构建中会自动扫描代码中使用的新api,并引入对应的转换代码,而不是全量引入,从而可以减少资源包的大小,但是需要注意的是:.

    配置usage可以按需引入转换代码,但是对于node_modules文件夹下的代码,默认是不会转换的(使用vue cli创建的项目,babel-loader默认不会转换这部分代码),所以类似ant-design,element-ui这些使用了新的api的库,在node_modules里是不会被转换的。.

Configuration #

  • 如果查看babel转换过的代码可以知道,对于includes这种api 直接是 require 了一下,并不是另一种更符合直觉的方式,代码如下:.

  • 所以 Babel 的 polyfill 机制是,对于例如 Array.from 等静态方法,直接在 global.Array 上添加;对于例如 includes 等实例方法,直接在 global.Array.prototype 上添加。这样直接修改了全局变量的原型,有可能会带来意想不到的问题。这个问题在开发第三方库的时候尤其重要,因为我们开发的第三方库修改了全局变量,有可能和另一个也修改了全局变量的第三方库发生冲突,或者和使用我们的第三方库的使用者发生冲突。公认的较好的编程范式中,也不鼓励直接修改全局变量、全局变量原型。.

    另外Babel 转译 syntax 时,有时候会使用一些辅助的函数来帮忙转,比如:. class 语法中,Babel 自定义了 _classCallCheck这个函数来辅助;typeof 则是直接重写了一遍,自定义了 _typeof 这个函数来辅助。这些函数叫做 helpers。从上图中可以看到,helper 直接在转译后的文件里被定义了一遍。如果一个项目中有100个文件,其中每个文件都写了一个 class,那么这个项目最终打包的产物里就会存在100个 _classCallCheck 函数,他们的长相和功能一模一样,这显然不合理。.

    其中 @babel/plugin-transform-runtime 的作用是转译代码,转译后的代码中可能会引入 @babel/runtime-corejs3 里面的模块。所以前者运行在编译时,后者运行在运行时。类似 polyfill,后者需要被打包到最终产物里在浏览器中运行。.

    可以看到,在引入了 transform-runtime 这个插件后:. api 从之前的直接修改原型改为了从一个统一的模块中引入,避免了对全局变量及其原型的污染。. helpers 从之前的原地定义改为了从一个统一的模块中引入,使得打包的结果中每个 helper 只会存在一个。.

No Need to Eject

  • 编辑于 2021-08-31 09:05. Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end Testing.

  • The plugin system allows the community to build and share reusable solutions to common needs.

    Vue CLI is fully configurable without the need for ejecting. This allows your project to stay up-to-date for the long run.

    Create, develop and manage your projects through an accompanying graphical user interface.

    Instantly prototype new ideas with a single Vue file. Effortlessly ship native ES2015 code for modern browsers, or build your vue components as native web components.

Current Tags

  • Create a project:. The table below has a list of all versions of @vue/cli-plugin-babel with compatible (peer) dependencies.

  • @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

    @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

Injected webpack-chain Rules #

  • @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

  • @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

    @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

# Getting Started

  • @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

  • @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

    @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

    • @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0.
    • @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

    @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

    @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0 || ^5.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0 || ^5.0.0-0.

Polyfills #

  • @vue/cli-service @ ^3.0.0 || ^4.0.0 || ^5.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0 || ^5.0.0-0.

  • @vue/cli-service @ ^3.0.0 || ^4.0.0-0.

    @vue/cli-service @ ^3.0.0 || ^4.0.0 || ^5.0.0-0. @vue/cli-service @ ^3.0.0 || ^4.0.0 || ^5.0.0-0. Modified2 years, 6 months ago. I'm trying to add Babel to an already existing Vue CLI project.

    Following the directions here: https://www.npmjs.com/package/@vue/cli-plugin-babel. this results in the error:. I've tried deleting NPM cache and updating NPM, node, and Vue CLI. Should I be specifying another registry? 11 gold badge44 silver badges1414 bronze badges.

    1414 bronze badges. I got the same error. Thinking it might be a bug, but using vue add @vue/cli-plugin-babel seems to work. Give that a try! You will notice a browserslist field in package.json (or a separate .browserslistrc file) specifying a range of browsers the project is targeting.

    This value will be used by @babel/preset-env and autoprefixer to automatically determine the JavaScript features that need to be transpiled and the CSS vendor prefixes needed.

    See here for how to specify browser ranges. A default Vue CLI project uses @vue/babel-preset-app, which uses @babel/preset-env and the browserslist config to determine the Polyfills needed for your project.

    By default, it passes useBuiltIns: 'usage' to @babel/preset-env which automatically detects the polyfills needed based on the language features used in your source code. This ensures only the minimum amount of polyfills are included in your final bundle.

Extensible

  • However, this also means if one of your dependencies has specific requirements on polyfills, by default Babel won't be able to detect it.

  • If one of your dependencies need polyfills, you have a few options:.

    If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js. This would enable both syntax transforms and usage-based polyfill detection for that dependency.

    If the dependency ships ES5 code and explicitly lists the polyfills needed: you can pre-include the needed polyfills using the polyfills option for @vue/babel-preset-app.

Installing in an Already Created Project #

  • Note that es.promise is included by default because it's very common for libs to depend on Promises.

  • It's recommended to add polyfills this way instead of directly importing them in your source code, because polyfills listed here can be automatically excluded if your browserslist targets don't need them.

    If the dependency ships ES5 code, but uses ES6+ features without explicitly listing polyfill requirements (e.g. Vuetify): Use useBuiltIns: 'entry' and then add import 'core-js/stable'; import 'regenerator-runtime/runtime'; to your entry file.

    This will import ALL polyfills based on your browserslist targets so that you don't need to worry about dependency polyfills anymore, but will likely increase your final bundle size with some unused polyfills.

See @babel/preset-env docs for more details.

When using Vue CLI to build a library or Web Components, it is recommended to pass useBuiltIns: false to @vue/babel-preset-app to disable automatic polyfill injection. This ensures you don't include unnecessary polyfills in your code, as it should be the responsibility of the consuming app to include polyfills.

With Babel we are able to leverage all the newest language features in ES2015+, but that also means we have to ship transpiled and polyfilled bundles in order to support older browsers. These transpiled bundles are often more verbose than the original native ES2015+ code, and also parse and run slower.

Given that today a good majority of the modern browsers have decent support for native ES2015, it is a waste that we have to ship heavier and less efficient code to those browsers just because we have to support older ones.

Future Ready

  • Vue CLI offers a "Modern Mode" to help you solve this problem.

  • When building for production with the following command:.

    Vue CLI will produce two versions of your app: one modern bundle targeting modern browsers that support ES modules, and one legacy bundle targeting older browsers that do not.

Installing in an Already Created Project

  • The cool part though is that there are no special deployment requirements.

  • The generated HTML file automatically employs the techniques discussed in Phillip Walton's excellent post:.

    The modern bundle is loaded with