bable 在vue、reactd的意义 Jim

不管在vu还是react中都需要bable编辑器

官网 https://babel.docschina.org/docs/en/config-files/#project-wide-configuration

在执行 npm/yarn run build 时bable会对代码进行编译

一、Babel 是什么？

Babel 是一个 JavaScript 编译器
babel是一个工具链，用于将ES6+语法转换为当前版本浏览器等环境兼容的javascript代码。babel目前已经支持了最新版本的javascript语法，对于目前尚未被浏览器支持的语法，可以通过babel插件支持。

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

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

二、配置文件

Babel有两种并行的配置文件的方式，可以一起使用，也可以单独使用。

项目范围的配置
文件相关配置

.babelrc（和.babelrc.js）文件
package.json中"babel"关键字的部分
 
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
bable.config.js中配置如下：

plugins.push(['import', {
    'libraryName': 'ant-design-vue', //本人使用的antd的库，如果你是用的Vant或elemnt直接替换即可
    'libraryDirectory': 'es',
    'style': true // `style: true` 会加载 less 文件
}])

打包时会自动转为 import {TreeSelect} from 'ant-design-vue'

1. 项目范围的配置
根目录创建 babel.config.js 文件。babel.config.js 的官方文档在这里 https://babel.docschina.org/docs/en/config-files/#project-wide-configuration
相关配置如下：一下是本人项目中配置根据需求而定

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

const plugins = []
if (IS_PROD) {
    // 去除日志的插件，在build时消除console.log
    plugins.push('transform-remove-console')
}

// lazy load ant-design-vue
// if your use import on Demand, Use this code
plugins.push(['import', {
    'libraryName': 'ant-design-vue',
    'libraryDirectory': 'es',
    'style': true // `style: true` 会加载 less 文件
}])

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
        [
            '@babel/preset-env',
            {
                'useBuiltIns': 'entry',
                'corejs': 3
            }
        ]
    ],
    plugins
}

plugins该属性是告诉babel要使用那些插件，这些插件可以控制如何转换代码。
presets属性告诉Babel要转换的源码使用了哪些新的语法特性，presets是一组Plugins的集合。官方提供以下的规则集，你可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
 
# react转码规则
$ npm install --save-dev babel-preset-react
 
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3