Babel 7 初探

　　最近在做项目的依赖的清理，看到babel 已经升级7.9了，而我对babel的认知还停留在6时代，觉得需要重新学习一下了。

　　我们都知道, Babel是转译工具，它能把最新的javaScript的语法，转化成旧的js 的语法。转译的核心则在于插件，提供给babel 什么插件，babel 就会转译什么。如果我们提供了转化箭头函数的插件，babel 遇到箭头函数就会把它转化成普通函数。新建一个项目babel-learning,  在其中建一个src目录，在src 下建index.js, (mkdir babel-learning && cd babel-learning && mkdir src && cd src && touch index.js),  最好再建一个package.json 文件(cd ..  && npm init -y)，管理项目依赖。使用babel 进行转译，要安装哪些依赖呢？

　　@babel/cli  babel 命令集合，在命令行中直接调用babel 命令，对文件进行编译，如果使用webpack，那就不用它，要用babel-loader. 

　　@babel/core, babel的核心，它负责转译js 语法，但单独使用它，却起不到转译的作用，需要你给它提供插件。也就是说，如果只安装@babel/core, 调用babel 命令进行转译，文件会原模原样地进行输出，转译后的文件和原文件一模一样。

　　npm i @babel/core @babel/cli  --save-dev 试一试，这里要注意，babel 7 把babel依赖包的名称给重新写了，以前是 babel-，现在是@babel/，安装完成后，在index.js 文件中随便写一个箭头函数，

const sum = (a, b ) => a + b;

　　然后在命令行中调用babel 命令 npx babel src  --out-dir dist，npx可以直接调用node_modules 中的命令，--out-dir 表示输出到什么地方, 当然也可以在package.json 的script 中写入"babel": "babel src --out-dir dist" ，再npm run babel 调用babel 命令。看一下打包后的index.js 可以发现是没有任何变化。

　　提供转译箭头函数的插件， npm i  @babel/plugin-transform-arrow-functions --save-dev,  安装完成后，调用babel 命令的时候，怎么让babel 使用这个插件呢？有两种方式，一种是在命令行后面加--plugins， 一种是配置文件。最好使用配置文件吧，因为添加和修改插件都比较方便。配置文件的命名也改了，原来是.babelrc, 现在官方建议是babel.config.json. touch babel.config.json

{
    "plugins": ["@babel/plugin-transform-arrow-functions"]
}

{
    "presets": [
        "@babel/preset-env"
    ]
}

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-proposal-decorators"
    ]
}

"presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "chrome": "58"
                }
            }
        ]
    ]

"targets": {
                    "chrome": "58",
                    "ie": "11"
                }

const promise = new Promise()

"presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "chrome": "58",
                    "ie": 11
                },
                "useBuiltIns": "entry",
                "corejs": 3
            }
        ]
    ]

import 'core-js';

const promise = new Promise();

            {
                "targets": {
                    "chrome": "58",
                    "ie": 11
                },
                "useBuiltIns": "usage",
                "corejs": 3
            }    

原文地址：https://www.cnblogs.com/SamWeb/p/12992110.html