注意:如果没有装node.js,先去装一个!!安装node.js时会默认安装npm。
步骤:
1、新建一个文件夹,装接下来的所有东西。我新建了一个learn-es6文件夹
2、在learn-es6项目文件下创建根目录文件:
-package.json
-src文件夹--index.html--js文件夹---index.js
这一步的关键是
- 一定要有src文件夹!!要不然后面会报错
- 预定要新建一个package.json文件!
这两个千万不能少,少一个就会报错!
index.html文件内容先为空、index.js内容也先为空(安装完成后,测试用)。
3、配置文件.babelrc
打开MAC的终端:
3.1 先sudo -s获取最高权限;
3.2 然后通过cd进入learn-es6项目文件;
3.3 接着“vim .babelrc”新建一个.babelrc 文件:
键盘输入”i“进入编辑模式,然后输入
{"presets": ["es2015","react","stage-2"],"plugins": []}
输入完毕,“esc”键退出。输入“:wq”,冒号是英文的,表示保存并退出。
并且安装以下规则集:
# 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、命令行转码babel-cli
注意:babel-cli 安装在项目之中,官网已经强烈建议不要安装在全局环境下!!
终端依旧在learn-es6的位置,执行以下命令:
$ npm install --save-dev babel-cli
5、执行下列命令,没有报错即可。
$ npm run build
更多专业前端知识,请上 【猿2048】www.mk2048.com