RN: Mac 配置 ES6 简易开发环境

创建文件夹 ES6

1
2
3
ES6
-lib
-src

你可以任意取一个你喜欢的目录名称.

初始化项目

1
npm init

填写项目信息.

查看一下 package.json

1
cat package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"name": "es6tutorials",
"version": "1.0.0",
"description": "Tutorial",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"es6",
".etc"
],
"author": "mark.zhang",
"license": "MIT"
}

目录结构如下

1

安装 babel-cli

1
npm install --save-dev babel-cli

也可以全局安装

1
npm install babel-cli -g

全局安装上后,会安装如下四个程序到全局环境中:

1
2
3
4
babel
babel-node
babel-doctor
babel-external-helpers

安装 babel-core

1
npm install babel-core --save

安装 ES2015 插件

1
npm install babel-preset-es2015

编写配置文件 .babelrc

注意该文件有个点符号.

在工程目录下新建该文件

1
touch .babelrc

写入如下内容

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

编写测试代码 tutorials.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function test()
{
console.log(a);
var a = 0;
}
test();
var a = [];
for (var i = 0; i < 10; i++) {
var c = i;
a[i] = function () {
console.log(c);
};
}
a[6](); // 9
var b = [];
for (var i=0; i<10; i++) {
let c = i; //let 是 es6中的关键字
b[i] = function() {
console.log(c)
};
}
b[6]();

编译

1
babel src/tutorials.js

运行

1
babel-node src/tutorials.js

1

这里可以下载 工程源码.

其他操作

1.将 ES6 语法的文件转换为 ES5 的语法

1
babel -d lib/ src/

在 lib 目录下会生成 src 目录中对应的文件.

2.进入交互模式

1
babel-node

两次 ctrl+c 退出

3.检查babel状况

1
babel-doctor

检查以下内容

  • 配置文件.babelrc

  • 是否有重复的babel安装包,比如说安装了5和6

  • babel安装包是否已经升级到了最新版

  • npm >= 3.3.0

1

4.卸载全局的 babel-cli

1
npm uninstall --global babel-cli

感谢

坚持原创技术分享!