babel的认识

一.简介：

babel官网：https://www.babeljs.cn/
githup：https://github.com/babel/babel
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
我这里只是介绍基本的使用方法，详细的可以到官网查看。

1.1基本实现的效果：

// Babel 输入： ES2015 箭头函数
[1, 2, 3].map((n) => n + 1);

//-------------------------------------------------------------

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
   
  return n + 1;
});

1.2 整个设置过程：

运行以下命令以安装软件包：
（这些命令是通过的，哪些不满足请自己安装）

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save-dev @babel/preset-stage-2
npm install --save @babel/plugin-transform-runtime
npm install --save npm install @babel-plugin-syntax-dynamic-import

.babelrc 文件（根目录下），vue项目开发使用的配置如下：

{
   
  "presets": [
    [ "@babel/preset-env", {
   
      "modules": false
    }],
    "stage-2"
  ],
  // 下面指的是在生成的文件中，不产生注释
  "comments": false,
  "plugins": ["transform-runtime","syntax-dynamic-import"],
  
  // 下面的代码可以不要
  "env": {
   
    // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
    "test": {
   
      "presets": [ "@babel/preset-env", "stage-2"],
      // instanbul是一个用来测试转码后代码的工具
      "plugins": ["istanbul"]
    }
  }
}

.babelrc 文件（根目录下），React项目开发使用的配置如下：

{
   
  "presets": [
    [ "@babel/preset-env",, {
    "modules": false }],
    "stage-2",
    "react"
  ]
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
   
    "test": {
   
      "presets":