babel转换器

一、配置文件.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

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

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react
````
##### 然后，将这些规则加入.babelrc。
```JavaScript
{
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

注意，以下所有Babel工具和模块的使用，都必须先写好.babelrc。

（前面步骤必不可少）

  • babel-cli：命令行转码
  • babel-node：babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境
  • babel-register：实时转码，所以只适合在开发环境使用
  • babel-core：如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块

二、babel-cli：

一种使用方式就是全局安装：npm install -g babel-cli（可以通过 npm root -g 查看全局包安装目录），
只要全局安装了 babel-cli，则会在命令行中多出一个命令：babel。

这里如果使用全局安装的 babel-cli 进行转码是没有问题的，但是问题是如果一旦项目给了别人，
别人不知道你使用了这个转码工具，所以解决方式就是将 babel-cli 安装到本地项目中：

1
npm install --save-dev babel-cli

这种第三方命令行工具如果安装到本地项目，会在 node_modules 中生成一个目录：.bin，
然后第三方命令行工具会将对应的可执行文件放到该目录中。

这样的话，就可以直接在本地项目中使用该第三方命令行工具了。

对于如何使用，则可以通过配置 package.json 文件中的 scripts 字段来配置使用：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "babel-demo",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel demo1.js"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0"
  }
}

三、babel-register（适合开发阶段，实时编码转换）:

第一：安装 babel-register

1
npm install --save-dev babel-register

第二：添加一个傀儡文件(main.js)：

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

第三：使用 node 执行 main.js，而不是你的入口文件.

四、package.json中 scripts 配置说明

1
2
3
4
5
6
7
"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": "node main.js", // 开发时运行这个，babel会帮我们把ES6语法转换为可以识别的ES5语法进去启动
   "build": "babel src -d dist", //  把开发时使用的ES6语法转换到dist目录下以ES5的语法呈现
   "prestart": "npm run build", // 会先执行 build 再执行 start
   "start": "node dist/app.js" // 启动app.js 相当于 node app.js
 },

五、–save 和 –save-dev

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

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

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