写在最前面

往后陆续更新EXMA script 6的文章，都是之前工作的积累和网上搜索总结后自己再重新操手一遍，为了以后工作的需要，有理解的不到位的地方请小伙伴多多指正，共同进步！

es6的优点（题外话）:

es6是ECMAScript2015。es6是js的子集，但是我们一般说的js是es6之前的版本。js本身是很不完美的语言，但是es6将js很多丑陋的部分通过语法糖隐藏了。它提供了很多特性，像jascript数据处理，箭头函数，解构赋值，Default Parameters(默认参数),Classes(类)，Modules(模块)等，包括前后端分离用的这些异步请求方法，能非常好的解决大前端遇到的问题。

es6的开发环境搭建

工欲善其事必先利其器，哈哈，所以第一步就是搭建一个es6的开发环境。低版本的浏览器不支持es6的语法，这就需要在运行环境中把es6的语法转换成es5的语法，在vue中Webpack是有自动编译和转换能力的，除了Webpack还有babel可以使用

Babel使用规则

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。

// 转码前
input.map(item => item + 1);// 转码后
input.map(function (item) {return item + 1;
});
//上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

1.安装`babel`

Babel提供babel-cli工具，用于命令行转码。

它的安装命令如下：

//需要先安装babel-cli
npm install --global babel-cli

2.配置文件`.babelrc`

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

{"presets": [],"plugins": []
}

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# ES2015转码规则
npm install --save-dev babel-preset-es2015# 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

然后，将这些规则加入.babelrc。

//例如：按需求添加
{"presets": ["es2015","stage-2"],"plugins": []
}

3.用法

# 转码结果输出到标准输出
$ babel example.js# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib# -s 参数生成source map文件
$ babel src -d lib -s

上面代码是在全局环境下，进行Babel转码。这意味着，如果项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

# 安装
npm install --save-dev babel-cli

然后，改写package.json。

{// ..."devDependencies": {"babel-cli": "^6.0.0"},"scripts": {"build": "babel src -d lib"},
}

转码的时候，就执行下面的命令。

npm run build

看一万遍，不如自己真正实践一遍

第一步：（创建本地项目以及目录）

本地新建文件夹，重命名为es6test,用vscode代码编辑器打开，在文件夹下新建两个文件，分别是项目文件src，以及打包文件dist文件，在src文件夹下新建index.html文件，并列新建index.js文件，并将index.js文件引入index.html

第二步：（初始化项目，添加转码依赖包）

打开vscode终端 ctrl +~,在文件根目录下初始化项目：

npm init -y

会生成一个package.json文件, -y的目的是在初始化时配置默认值，后续在生成的文件中修改即可。

npm太慢,先安装个cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

在终端全局安装babel-cli工具，用于命令行转码

cnpm install -g babel-cli

这里迫不及待的想试一试有没有用，能转码不，就先在终端测了一下

babel src/index.js -o dist/index.js

不出我所料啊，肯定不行！dist文件下是生成了个index.js文件，但是并未转换成es5的语法

再在本地安装两个依赖包

cnpm install --save-dev babel-preset-es2015 babel-cli

package.json中如果出现下面的内容，恭喜你，所有的依赖包都安装完了

第三步：（根目录下.babelrc文件配置）

第四步：（package.json中修改scripts命令执行项）

第五步：（验收成果，哈哈！）

cnpm run build

你也可以在src/index.js中再写些es6的语法，测试下。

写在最后

后续会陆续更新es6的所有新特性，预计得13章节，共同加油呀！

下一篇：ES6（二）ES6的let、const(var、let、const的区别)

ES6（一）ES6的开发环境搭建(es6转码为es5)相关推荐

macOS下GDAL Java开发环境搭建
文章目录 macOS下GDAL Java开发环境搭建 GDAL源码编译安装 Maven安装本地JAR 使用Java版GDAL示例版权声明:本文为博主原创文章,转载请注明原文出处! 写作时间:2020 ...
ES6的开发环境搭建
在搭建es6开发环境之前,先简单介绍一下es6. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 Java ...
vuejs项目开发环境搭建（ESlint安装）
vuejs项目开发环境搭建(ESlint安装) vuejs项目开发环境搭建,有时候需要安装ESlint! eslint对ES6语法支持更好,可以通过eslint在团队开发中快速统一ES6的语法,精简代 ...
Android环境搭建和Android HelloWorld—Android开发环境搭建
Android_Android开发环境搭建-搭建Android的开发环境 1.我考虑先下载JDK7.0,在JDK的安装中,考虑一般SDK都是向上兼容的,于是选择了最高的版本7.0 这里是我总结的详细的 ...
qt工程在linux系统里颜色显示错误_【飞凌嵌入式RK3399开发板试用体验】+QT开发环境搭建测试（二）...
作者:飞扬的青春在拿到开发板之后,已经体验了Android操作系统,接下来就是体验Linux下的开发,本次以QT的一个小案例来测试下. 首先是自己先搭建了一个Ubuntu18．04的虚拟机,使用真机 ...
Go：分布式学习利器（1） -- 开发环境搭建 + 运行第一个go程序
文章目录为什么要学习 go 开发环境搭建 -- MAC 运行第一个go程序 go 函数的返回值设置 go 函数的命令行参数为什么要学习 go 在如下几个应用场景的需求下产生了go: 超大规模分布式 ...
智能合约开发环境搭建及Hello World合约
如果你对于以太坊智能合约开发还没有概念(本文会假设你已经知道这些概念),建议先阅读入门篇. 就先学习任何编程语言一样,入门的第一个程序都是Hello World.今天我们来一步一步从搭建以太坊智能合约 ...
iPhone开发环境搭建全过程 iPhone手机开发内容，中文手册
http://3g.edu.csdn.net/kecheng/iphone.html iPhone手机开发内容 http://www.docin.com/p-34874880.html# iPhon ...
python搭建numpy_python开发环境搭建及numpy基本属性-【老鱼学numpy】
目的本节我们将介绍如何搭建python的开发环境以及numpy的基本属性,这样可以检验我们的numpy是否安装正确了. python开发环境的搭建工欲善其事必先利其器,我用得比较顺手的是Intel ...

ES6（一）ES6的开发环境搭建(es6转码为es5)

写在最前面

es6的优点（题外话）:

es6的开发环境搭建

Babel使用规则

1.安装`babel`

2.配置文件`.babelrc`

3.用法

看一万遍，不如自己真正实践一遍

第一步：（创建本地项目以及目录）

第二步：（初始化项目，添加转码依赖包）

第三步：（根目录下.babelrc文件配置）

第四步：（package.json中修改scripts命令执行项）

第五步：（验收成果，哈哈！）

写在最后

ES6（一）ES6的开发环境搭建(es6转码为es5)相关推荐

最新文章

热门文章

ES6（一）ES6的开发环境搭建(es6转码为es5)

写在最前面

es6的优点（题外话）:

es6的开发环境搭建

Babel使用规则

1.安装babel

2.配置文件.babelrc

3.用法

看一万遍，不如自己真正实践一遍

第一步：（创建本地项目以及目录）

第二步：（初始化项目，添加转码依赖包）

第三步：（根目录下.babelrc文件配置）

第四步：（package.json中修改scripts命令执行项）

第五步：（验收成果，哈哈！）

写在最后

ES6（一）ES6的开发环境搭建(es6转码为es5)相关推荐

最新文章

热门文章

1.安装`babel`

2.配置文件`.babelrc`