初探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，搞定。

转载于:https://www.cnblogs.com/MJyaaatou/p/9540803.html