JavaScript版本
- ECMAScript
ECMAScript 是跨多个平台的许多厂商实施的不断发展的标准,JavaScript是其实现(同时也好有其他实现,不过JavaScript是主流) - ES5发布
在2009年,在Java的神奇崛起之前。JavaScript第五版(es5)正式发布 - ES6发布
时隔六年,2015年JavaScript第六版(es6)发布,此后,由于前端占据的地位越加重要,es标准组织不断完善标准,此后每隔一年就会出一个新版的JavaScript - 这几年es版本如下
JavaScript第五版es5es2009
JavaScript第六版es6es2015
JavaScript第七版es7es2016
JavaScript第八版es8es2017
JavaScript第九版es9es2018 【还未正式发布】
各版本试用地址:https://www.babeljs.cn/repl/ - Es标准实现基本流程:
五个阶段
Strawman(Stage0,稻草人)
表示有机会写入标准
Proposal(Stage1,提议)
讨论实现方法和可能存在的挑战
Draft(Stage2,草案)
明确地用正式文档语言描述语法和语义,
Candidate(Stage3,候选)
需要实现和用户的反馈来做细微的改进,准备好进入 ECMAScript 标准。
Finished(Stage4,完成)
意味着已经在标准中了
注意
Stage 0,1,2表示还处于细胞状态,Stage 3 则是意味着很大程度能进入标准,Stage 4则表示正式进入标准 - JavaScript引擎中的实现进程
ES2015 是语言的一次重大更新,也是自2009年ES5标准确定后的第一个重大更新,目前主流的JavaScript引擎中的实现进展在这里。 - 各版本区别
JavaScript中主体还是在es5版本,然后es6增加了一部分, 至于es7,8,9只是在es6基础上加了少量特性,而且浏览器能够完全支持的就只有es5,连es6都有少部分是无法支持的,至于es7,8,9就是各浏览器厂商看情况实现了。 - babel
为此,我们要学习并正常的使用新版本es的语法就必须要依赖语法转换工具
这里我们选择流行的babel
Babel
Babel 是一个 JavaScript 编译器
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API.(不转换新的API.的意思是:对极少部分浏览器无法支持的api,转换之后的也无法正常的使用,比如:import,export)
通俗理解:
Babel能将浏览器暂时不支持的新式语法(并不是全部)转换为可支持语法形式,如:把不识别的es6转换为es5
Babel的安装与使用
①在浏览器中进行转译
在你的es6+版本的js代码前引入一个babel.js文件即可,可下载到本地使用,也可直接使用cdn形式引入,如:
<div id="output"></div>
<!-- 加载 Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 你的脚本代码 -->
<script type="text/babel"> //关键代码
const getMessage = () => "Hello World";
//把转换后的函数显示在网页中
document.getElementById('output').innerHTML = getMessage;
</script>
这种方式类似与在网页中引入less.js文件去转义less文件一样,是在执行的过程中进行转换的
参考地址: https://www.babeljs.cn/docs/setup#installation
②在命令行中进行转译
1. 全局安装babel的命令行工具:
cnpm install babel-cli -g
2. 安装完成后通过命令 babel --version 查看是否安装成功
babel --version
3. 执行命令,安装babel-preset-env到本地
cnpm install babel-preset-env --save-dev
4. 在项目根目录下创建 .babelrc 文件,文件中的内容如下
{
"presets": ["env"]
}
因为在windows系统中,不允许直接右键建立没有文件名的文件,所以创建 .babelrc 文件有两个方式,第一个是直接通过编辑器创建,第二个是直接通过cmd命令行创建
以下是cmd命令行创建方式:
type nul>.babelrc
5. 创建js文件,书写es6+语法
6. 执行命令将es6转换为es5
- 文件到文件:babel js文件路径 -o 转译后生成的文件路径
- 文件到文件夹:babel js文件路径 -d 转译后生成的文件夹路径
- 文件夹到文件夹:babel 文件夹 -d 转译后生成的文件夹路径
在package.json文件的脚本中配置转义命令
- 创建项目目录babelTtest
- 在根目录下创建一个package.json文件,可以手动填写,也可以通过命令cnpm init --yes自动生成(也可以不显式的创建,执行下面命令后会自动的创建package.Json文件)
cnpm init --yes
- 在当前目录执行x下列命令,以便于安装babel-cli命令行工具(此为开发依赖)
cnpm install babel-cli babel-preset-env --save-dev
- 创建 .babelrc 文件,如下
{
"presets": ["env"]
}
- 在你的 package.json 中添加一个 “scripts” 属性并将 babel 命令放在它的 build 属性中,如下(src等目录名根据你自己实际情况写):
"scripts": {
"build": "babel src -d lib"
},
- 运行以下命令,开始转译
npm run build