记---es6+转es5--babel

假设电脑D盘有一个项目文件夹project，以此为根目录
以 project/js 为例，

1.安装node，按照官网一步步来就行，全局安装就行

2.安装 babel-cli
(1)检查项目根目录下是否有文件package.json，如果没有，在根目录执行命令行
npm init
初始化一个package.json文件即可
(2)Babel 官方推荐将 Babel 安装在本地，因为 Babel 的不同版本以及不同转码规则会起到不同的效果，全局安装会带来不必要的麻烦。在根目录我们执行如下命令将其安装到项目中。
npm install --save-dev babel-cli

3.为 Babel 安装语法插件
官方提供了几套预设的规则集，分别适用于 ES2015、React 和 ES7 的一些实验性特性。我们可以根据需要安装（如果只需要学习 ES6 语法的话，就只选 ES2015 好了）。

#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

4. .babelrc 文件配置
(1)这块要说一下，在windows系统中，不允许直接右键建立没有文件名的文件，可以通过cmd命令行创建，在根目录打开cmd(shift键+鼠标右键，会有弹框，选择在此处打开命令窗口)，并输入命令 type null>.babelrc 创建配置文件.babelrc
(2)该文件中输入如下代码来启用预设（假设我们用到了 ES2015、ES7 这两个转码规则）。

{
    "presets": [
      "es2015",
      "stage-0"
    ],
    "plugins": []
}

5.假如你使用的是win系统
(1)在 project/js 中创建了一个名为 es6.js 的文件，其内部代码如下（使用箭头函数这个新特性）：

const t = () => console.log("test")
t()

(2)由于我们的 babel-cli 不是全局安装，所以没法直接使用 babel 命令。我们需要在项目的根目录下自行添加一个 babel.cmd 文件，并写入以下内容，就能使用项目里的 babel 命令了。

node .\node_modules\babel-cli\bin\babel.js %*

(3)babel的相关命令
根目录执行命令

babel es6.js

即可在命令窗口中看到被转码后的结果

var t = function t(){
	console.log("test");
};
t();

也可使用下面命令可进行转码，并将结果保存到指定文件中（前提是该是定文件必须存在）。

babel es6.js -o es5.js

Babel 还支持实时转码，执行下面的命令后，任何对 ES6 代码的修改，保存之后都会自动转码，无需人工再干预。（完成后用 Ctrl+C 结束）

babel es6.js --watch -o es5.js

Babel 还能批量处理整个路径下的 JS 文件，下面的代码把 js 目录下的文件批量转码并放到 build 目录下：
-d 不是盘符 是一个命令

babel js -d build

(4)官方推荐的件批量转码方法
这个是官方更推荐的方法，我们在 package.json 文件中的 scripts 属性中添加一项 “build”: “babel js -d js”
同理可推出，也可将代码转换覆盖当前目录

{
  "name": "babeltest",
  "version": "1.0.0",
  "main": "test.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "babel": "babel",
    "build": "babel js -d js" // 新增
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  },
  "description": ""
}

接着执行如下代码即可自动将 js 目录下的 js 文件自动进行转码并覆盖 js 目录。

npm run build

babel转码之后默认是严格模式，代码上方都会新增一串 “use strict;” 代表使用严格模式，但是如何取消严格模式呢，执行命令行

npm install babel-plugin-transform-remove-strict-mode

修改 .babelrc文件即可，如下：

{
    "presets": [
      "es2015",
      "stage-0",
	  ["env", {
        "modules": false,
        "targets": {
          "browsers": [">0.1%", "ie >= 8"]
        },
        "useBuiltIns": "usage",
        "debug": true
      }]
    ],
    "plugins": ["transform-remove-strict-mode"]  // 新增
}

再次执行命令 npm run build 你会发现已经取消了严格模式