使用babel把es6代码转成es5代码

第一步：创建一个web项目

使用命令：npm init

这个命令的目的是生成package.json.

执行第二步中的命令后生成的package.json的文件的内容是：

{
  "name": "babel_learning",
  "version": "1.0.0",
  "description": "learning babel",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "qin <123@qq.com>",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1"
  }
}

第二步：

使用下面的命令生成babel转码所需的js文件：

$ npm install babel-cli      注意这里我没有带-g这个参数，主要是想在本地，不想全局的。

# 最新转码规则
$ npm install --save-dev babel-preset-latest

# react 转码规则
$ npm install --save-dev babel-preset-react

# 不同阶段语法提案的转码规则（共有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

第三步：创建.babelrc 文件：
该文件有presets这里是转码规则。
plugins这里指插件。
文件的内容如下所示：

{
  "presets": [
    "latest",
    "react",
    "stage-2"
  ],
  "plugins": []
}

该测试项目的目录结构是：

example.js的代码如下：

[1,2,3].map(x => x*x);
console.log(`hello
world
longlive`);

　　最后转成example_compile.js的文件的代码如下：

"use strict";

[, , ].map(function (x) {
  return x * x;
});
console.log("hello\nworld\nlonglive");

最后这步非常最要因为我按照阮一峰老师的es6中的教程运行命令根本不行，这里有可能我的babel-cli是6版本的。
注意我这里用了npx

D:\materialDesignLearn\babel_learning>npx babel example.js //把exaple.js中的es6代码转成es5形式的代码
npx: installed 1 in 2.739s
Path must be a string. Received undefined
D:\materialDesignLearn\babel_learning\node_modules\babel-cli\bin\babel.js
"use strict";

[1, 2, 3].map(function (x) {
  return x * x;
});

D:\materialDesignLearn\babel_learning>example.js

D:\materialDesignLearn\babel_learning>npx babel example.js -o example_comple.js  //把exaple.js转成es5的代码输入到example_compile.js文件中。
npx: installed 1 in 4.476s
Path must be a string. Received undefined
D:\materialDesignLearn\babel_learning\node_modules\babel-cli\bin\babel.js

D:\materialDesignLearn\babel_learning>npx babel example.js
npx: installed 1 in 4.7s
Path must be a string. Received undefined
D:\materialDesignLearn\babel_learning\node_modules\babel-cli\bin\babel.js
"use strict";

[1, 2, 3].map(function (x) {
  return x * x;
});
console.log("hello\nworld\nlonglive");

D:\materialDesignLearn\babel_learning>npx babel example.js -o example_comple.js
npx: installed 1 in 4.35s
Path must be a string. Received undefined
D:\materialDesignLearn\babel_learning\node_modules\babel-cli\bin\babel.js

D:\materialDesignLearn\babel_learning>example_comple.js

D:\materialDesignLearn\babel_learning>

　　

在文章的结束说一下babel-cli的babel-node可以直接运行es6的代码，但是也要在前面带npx

D:\materialDesignLearn\babel_learning>npx babel-node
npx: installed 1 in 5.09s
Path must be a string. Received undefined
D:\materialDesignLearn\babel_learning\node_modules\babel-cli\bin\babel-node.js
> console.log([1,2,3].map(x=>{console.log(x*x);}));//这是es6代码
1
4
9
[ undefined, undefined, undefined ]
undefined
> [1,2,3].map(x=>x*x);//这也是es6代码
[ 1, 4, 9 ]//es6代码的返回结果。
>