How to configure babel configuration file in vue-cli

Babel is a widely used transcoder that can convert ES6 code into ES5 code so that it can be executed in the existing environment. This article introduces the babelrc configuration file in the root directory of the vue-cli scaffolding tool. Interested friends should take a look.

This article introduces the babelrc configuration file in the root directory of the vue-cli scaffolding tool

Introduction

Browsers do not yet support all es6 features, but using es6 is the general trend, so babel came into being to convert es6 code into code that the browser can recognize.

babel provides a special command line tool to facilitate transcoding. You can learn about the .babelrc file of the

vue-cli scaffolding by yourself

{
 // 此项指明，转码的规则
 "presets": [
 // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码
 ["env", { "modules": false }],
 // 下面这个是不同阶段出现的es语法，包含不同的转码插件
 "stage-2"
 ],
 // 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译
 "plugins": ["transform-runtime"],
 // 下面指的是在生成的文件中，不产生注释
 "comments": false,
 // 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置
 "env": {
 // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
 "test": {
  "presets": ["env", "stage-2"],
  // instanbul是一个用来测试转码后代码的工具
  "plugins": ["istanbul"]
 }
 }
}

ps : Let me introduce to you about the .babelrc configuration file

Regarding the react project structure, there are many configuration files, which sometimes are difficult to understand.

For example, the .babelrc file, this file is used to set transcoding rules and plug-ins.

If you are familiar with Linux, you must know that files ending in rc usually represent files, configurations, etc. that are automatically loaded at runtime. In babel6, this file is essential.
You can configure the babel command in it. When you use babel's cli in the future, you can use less configuration. There is also an env field, which can perform different compilation operations on different environment variables specified by BABEL_ENV or NODE_ENV.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Explain in detail the practical skills in Immutable and React

How to solve the error problem on VUEX compatible IE ( Detailed tutorial)

How to use readline in Node.js to read and write file content line by line

The above is the detailed content of How to configure babel configuration file in vue-cli. For more information, please follow other related articles on the PHP Chinese website!