JS拓展：Babel(解决低版本浏览器对es语法的兼容)

admin管理员组

文章数量:1530234

JavaScript版本

1. ECMAScript
   ECMAScript 是跨多个平台的许多厂商实施的不断发展的标准,JavaScript是其实现（同时也好有其他实现，不过JavaScript是主流）

2. ES5发布
   在2009年，在Java的神奇崛起之前。JavaScript第五版（es5）正式发布

3. ES6发布
   时隔六年，2015年JavaScript第六版(es6)发布,此后，由于前端占据的地位越加重要，es标准组织不断完善标准，此后每隔一年就会出一个新版的JavaScript

4. 这几年es版本如下
   JavaScript第五版es5es2009
   JavaScript第六版es6es2015
   JavaScript第七版es7es2016
   JavaScript第八版es8es2017
   JavaScript第九版es9es2018 【还未正式发布】
   各版本试用地址：https://www.babeljs/repl/

5. Es标准实现基本流程：
   五个阶段
   Strawman（Stage0，稻草人）
   表示有机会写入标准
   Proposal（Stage1，提议）
   讨论实现方法和可能存在的挑战
   Draft（Stage2，草案）
   明确地用正式文档语言描述语法和语义，
   Candidate（Stage3，候选）
   需要实现和用户的反馈来做细微的改进，准备好进入 ECMAScript 标准。
   Finished（Stage4，完成）
   意味着已经在标准中了
   注意
   Stage 0,1,2表示还处于细胞状态，Stage 3 则是意味着很大程度能进入标准，Stage 4则表示正式进入标准

6. JavaScript引擎中的实现进程
   ES2015 是语言的一次重大更新，也是自2009年ES5标准确定后的第一个重大更新，目前主流的JavaScript引擎中的实现进展在这里。

7. 各版本区别
   JavaScript中主体还是在es5版本，然后es6增加了一部分， 至于es7,8,9只是在es6基础上加了少量特性，而且浏览器能够完全支持的就只有es5,连es6都有少部分是无法支持的，至于es7,8,9就是各浏览器厂商看情况实现了。

8. 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/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/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文件的脚本中配置转义命令

1. 创建项目目录babelTtest

2. 在根目录下创建一个package.json文件，可以手动填写，也可以通过命令cnpm init --yes自动生成（也可以不显式的创建，执行下面命令后会自动的创建package.Json文件）

cnpm init --yes

3. 在当前目录执行x下列命令，以便于安装babel-cli命令行工具（此为开发依赖）

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

4. 创建 .babelrc 文件，如下

{
 "presets": ["env"]
}

5. 在你的 package.json 中添加一个 “scripts” 属性并将 babel 命令放在它的 build 属性中，如下（src等目录名根据你自己实际情况写）：

 "scripts": {
     "build": "babel src -d lib"
   },

6. 运行以下命令，开始转译

npm run build

本文标签： 语法版本浏览器jsBabeles