使用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 <[e-mail]>", "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"; [1, 2, 3].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代码的返回结果。
>