How to use vue-clibabel configuration file.babelrc

This time I will bring you vue-clibabelConfiguration file How to use .babelrc, what are the precautions when using vue-clibabel configuration file .babelrc, the following is a practical case, Let’s take a look.

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

introduce

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 special command line tools to facilitate transcoding, you can learn about it by yourself

.babelrc file of vue-cli scaffolding

{
 // 此项指明，转码的规则
 "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 are sometimes difficult to understand.

For example, the .babelrc 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 during 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. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of Vuex’s mutations and actions

FileReader implements local preview before uploading images

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