初探es6
es6环境
现在的JavaScript 引擎还不能完全支持es6的新语法、新特性。所以要想在页面中直接使用,是会报错的,这时候就需要使用babel将es2015的特性转换为ES5 标准的代码。
1、全局安装 babel-cli
cnpm install -g babel-cli
(这里我使用的是淘宝镜像,比较快,也可以直接npm)
想看是否安装成功,可以通过查看版本babel -V(大写V),或者直接babel,会有许多命令行提示,说明安装成功了。否则就安装失败了。
2、本地安装 babel-preset-es2015 babel-cli
仅全局安装babel-cli是转码不够的,还需要本地安装babel-preset-es2015 babel-cli 两个模块
安装这两个模块之前,先在本地新建一个文件夹叫es6,再新建一个index.js文件,随便写个箭头函数。
然后再在当前的cmd或者bash窗口输入 babel index.js 看看有没有成功。显然是没有成功的,嘿嘿。
题外话,补充几个babel的命令行参数 方便使用:
-o : 参数指定输出文件 -s : 参数生成source map文件 eg:babel src/index.js -o dist/index.js -s -d : 参数指定输出目录,可整个目录下的文件对应转码 eg: babel src -d dist babel 不带任何参数,eg:babel src/index.js 直接在窗口下转码输出
2.1 npm 初始化
npm init -y
npm init会初始化一个package.json文件,-y 表示默认都同意,不用一个个问题确认。如下:
2.2 本地安装 babel-preset-es2015 babel-cli
cnpm install --save-dev babel-preset-es2015 babel-cli
--save-dev 会自动保存到package.json的devDependencies选项中。
2.3 新建.babelrc文件
在根目录下新建.babelrc文件,注意别写错名字了,不然转码也会不成功的,因为读的就是babelrc这个文件。并填写如下:
presets: 设定转码规则
2.4 大功告成
以上步骤都完成的话,就基本大功告成啦。
最后在根目录中新建一个输出文件叫dist.js,然后在窗口输入babel index.js -o dist.js。如果没什么提示,说明ok了。如下图,左边是index.js用了箭头函数,右边是转码之后的dist.js,搞定。