Babel

一、概述

Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码

官网：https://babeljs.io/

在线编译：https://babeljs.io/repl

下面就先来看看使用babel编译后的es6代码：

未使用babel编译：

        let name = 'Alex';
        const age = 18;

        const add = (x, y) => x + y;

        // Set Map

        new Promise((resolve, reject) => {
            resolve('成功');
        }).then(value => {
            console.log(value);
        });

        Array.from([1, 2]);

        class Person {
            constructor(name, age) {
                Object.assign(this, {
                    name,
                    age
                });
            }
        }
        new Person('Alex', 18);

        import './index.js';

使用babel编译：

('use strict');

        require('./index.js');

        function _instanceof(left, right) {
            if (
                right != null &&
                typeof Symbol !== 'undefined' &&
                right[Symbol.hasInstance]
            ) {
                return !!right[Symbol.hasInstance](left);
            } else {
                return left instanceof right;
            }
        }

        function _classCallCheck(instance, Constructor) {
            if (!_instanceof(instance, Constructor)) {
                throw new TypeError('Cannot call a class as a function');
            }
        }

        var name = 'Alex';
        var age = 18;

        var add = function add(x, y) {
            return x + y;
        };

        new Promise(function(resolve, reject) {
            resolve('成功');
        }).then(function(value) {
            console.log(value);
        });

        Array.from([1, 2]);

        var Person = function Person(name, age) {
            _classCallCheck(this, Person);

            Object.assign(this, {
                name: name,
                age: age
            });
        };

        new Person('Alex', 18);

解释编译结果：

Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类

但是对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块

Babel 一般需要配合 Webpack 来编译模块语法

二、使用方式

在使用babel之前需要先安装node，对于node的安装可以去网上查

安装好node后可以通过cmd命令来测试安装成功与否，通过 npm -v 查看node的版本、以及通过 npm -v 来查看npm的版本，

最后安装 Babel 需要的包，在安装包之前需要先找到我们所需要的项目，然后在项目里打开cmd，之后对项目进行初始化执行如下操作：npm init，接下来再：

 默认安装最新版本

npm install --save-dev @babel/core @babel/cli

安装指定版本（推荐）

npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5

注意：

在这里为了可以提高包的安装速度，我们可以通过  npm config set registry https://registry.npm.taobao.org(npm install -g cnpm --registry=https://registry.npm.taobao.org``` )  将源从国外切换到国内，当然我这里是切换到了淘宝，也可以类似的切换到其他国内的源

三、使用babel编译es6代码

 a.执行编译的命令

        在 package.json 文件中添加执行 babel 的命令

        babel src -d dist

        这里-d其实就是--out-dir，于是上面的命令语句就等价于：

        babel src --out-dir dist

执行命令

        npm run build

之后便会自动生成一个dist文件夹

点进babel.js文件后我们发现跟我们之前在src文件夹里写的babel.js是一样的，只是稍微改变了一下，此时就需要添加配置文件，具体步骤如下：

执行 npm install @babel/preset-env@7.11.0 --save-dev  安装相关的包，安装该包的目的就是告诉babel将我们的代码转换为什么版本，安装好后在package.json文件里就会出现：

preset-env  的作用就是告诉babel具体该如何去转换es6相关的语法，例如箭头函数该怎么转换为一般函数

core  的作用就是相当于发号施令，负责调动，具体的事情交给别的模块去做

cli  的作用就是在使用命令行工具的时候需要使用的包，用来在命令行工具中执行babel相关的命令

b.Babel 的配置文件

在当前项目的目录中创建一个以 .babelrc 结尾的文件

并通过如下方式进行配置：

        {

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

        }

补充---转码方案：

# 转码结果输出到标准输出
$ npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib

# -s 参数生成source map文件
$ npx babel src -d lib -s