简介

本文是基于node环境下讲解babel工具的使用方法

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。简而言之，它是一个可以将ES6转码成其它ES版本的工具

配置

  1. 创建相关配置文件

    在sublime或者命令台新建文件.babelrc，如果在项目文件夹下新建该文件可能不会成功

  2. 接着，在该文件下添加代码用来设置转码规则，格式如下

    1
    2
    3
    4
    {
      "presets": [],
      "plugins": []
    }

  3. 在项目文件夹下安装babel

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

    在这里，–save-dev和–save的区别如下

    通过 --save 参数安装的包，是将依赖项保存到 package.json 文件中的 dependencies 选项中。
    通过 --save-dev 参数安装的包，是将依赖项保存到 package.json 文件中的 devDependencies 选项中。

    无论是 --save 或者 --save-dev 安装的包，通过执行 npm install 都会将对应的依赖包安装进来。

    但是，在开发阶段会有一些仅仅用来辅助开发的一些第三方包或是工具，然后最终上线运行（到了生产环境），
    这些开发依赖项就不再需要了，就可以通过 npm install --production 命令仅仅安装 dependencies 中的
    依赖项。

    image-20200724212606632

  4. 接着，安装规则集，这里要安装ES6转码成ES5的相关规则

    1
    npm install --save-dev @babel/preset-env

  5. 然后，就可以在.babelrc文件里添加该规则

    1
    2
    3
    4
    5
    6
    {
      "presets": [
        "@babel/env",
      ],
      "plugins": []
    }

    使用

命令行转码

  1. 安装命令行转码工具

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

  2. 用法（ ES6 入门教程）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 转码结果输出到标准输出
    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

  3. 执行示例

    源代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let a = [1, 2, 5, 4].find( n => n === 5)

    let  b = 1

    if (true) {
    	let b = 3
    }

    console.log(a)
    console.log(b)

    结果

    image-20200724220358868

@babel/register 模块

安装并引用该模块后，后面引用的所有包含ES6语法的模块都可以直接转码，而无需其他操作

  1. 安装模块

    1
    npm install --save-dev @babel/register

  2. 使用一个傀儡文件(main.js)来引入该模块并使用

    1
    2
    require('babel-register')
    require('你的核心功能代码入口文件模块')

  3. node直接使用main.js文件即可

    1
    node main.js

总结

这个主要用作教育网站项目的后端技术node.js的es6转码，涉及到两个环境，一个开发环境和一个生产环境

image-20200724212230181

因为node环境在有些ES6语法下无法执行，所以在这里就用到了babel转码器，在开发环境中全程ES6，到正式生产的时候就直接转成ES5语法。

补充

ES6中node引用模块

1
2
3
4
import express from 'express'
import artTemplate from 'express-art-template'
import path from 'path'
import * as a from './a'//引用a模块所有的方法

模块导出成员的几种方法

ES5

1
2
3
4
5
exports.foo = 'bar'
exports.f = function () {
  
}
exports.num = 10

ES6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 写法一
export const foo = 'bar'
export const f = function () {
  
}
export const num = 10


// 写法二
const foo = 'bar'
const f = function () {
  
}
const num = 10

export {
  foo,
  f,
  num
}

// 相当于 module.exports = function () {}
export default function () {
  console.log('fff')
}