在正式学习ES6之前,先学习一下ES6的转换器babel。(参考阮一峰的ECMAScript 6 入门)
1、准备(已安装node和npm的条件下)
新建一个文件夹作为一个项目文件夹,在当前文件夹中打开命令窗口,执行npm init 生成了package.js文件。
遇到的问题:npm init报错,因为刚开始的时候我给文件夹取了中文的名字o(╥﹏╥)o,改成英文的就好了。
2、配置 .babelrc 文件
a、创建.babelrc 文件
因为在windows系统中,不允许直接右键建立没有文件名的文件,所以创建 .babelrc 文件有两个方式,第一个是直接通过编辑器创建,第二个是直接通过cmd命令行创建。
在当前项目文件夹下,使用命令行:type nul>.babelrc 就可以了
b、配置.babelrc 文件内容
基本格式:
presets
字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
我安装的是最新转码规则
参考:
然后,将这些规则加入 .babelrc
注意:Babel工具和模块的使用之前,都必须先写好 .babelrc。
3、使用命令行转码 babel-cli
全局安装 npm install --global babel-cli
在项目文件中安装 npm install --save-dev babel-cli
在全局安装babel-cli,这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖, 并且这样做也无法支持不同项目使用不同版本的Babel。所以官网强烈建议我们使用后一种方式,在项目中安装。
在项目中安装之后,需要改写package.js:
注意:如果创建的目录文件夹名称不为src和lib,请记得一定要替换,不然后续转换时会报错。
转码的时候,就执行下面的命令。
$ npm run build