javacsript历史

1995 年网景浏览器首次发布浏览器脚本，给它命名为liveScript，一年后改名javascript。

1996 年，网景将 JavaScript 提交给 ECMA International（欧洲计算机制造商协会） 进行标准化，并最终确定出新的语言标准，它就是 ECMAScript。自此，ECMAScript 成为所有 JavaScript 实现的基础。

2012年，ECMAScript 第 6 版在六月份公布之前，又被重命名为了 ECMAScript 2015（ES2015）

• ECMAScript：一个由 ECMA International 进行标准化，TC39 委员会进行监督的语言。通常用于指代标准本身。
• JavaScript：ECMAScript 标准的各种实现的最常用称呼。这个术语并不局限于某个特定版本的 ECMAScript 规范，并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。
• ECMAScript 5 (ES5)：ECMAScript 的第五版修订，于 2009 年完成标准化。这个规范在所有现代浏览器中都相当完全的实现了。
• ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015)：ECMAScript 的第六版修订，于 2015 年完成标准化。这个标准被部分实现于大部分现代浏览器。可以查阅这张兼容性表来查看不同浏览器和工具的实现情况。
• ECMAScript 2016：第七版 ECMAScript 修订
• ECMAScript Proposals：被考虑加入未来版本 ECMAScript 标准的特性与语法提案，他们需要经历五个阶段：Strawman（稻草人），Proposal（提议），Draft（草案），Candidate（候选）以及 Finished （完成）。

ECMAScript中间每一个提案，都要依次经过 stage 0、stage 1、stage 2、stage 3、stage 4 五个阶段。其中到达 stage4 的为已通过，会出现在下一年的发布中。到达 stage3 的属于比较成熟的，极有可能在较小改动的前提下通过并发布，stage3 之前的则不太成熟，stage 越往前越容易大幅改动甚至被完全去掉。所以对于开发者来说，使用 stage 3 之前的语法有一定风险

在这里可以查看各个提案的状态：

• 已通过的：github.com/tc39/propos…
• 活跃讨论中的：github.com/tc39/propos…
• 待讨论的：github.com/tc39/propos…
• 拒绝的：github.com/tc39/propos…

babel

babel-cli

• 安装

yarn add babel-cli -D
复制代码

• 使用

babel 源文件 d 编译后的文件
复制代码

• 配置

在根目录下创建.babelrc文件，eg:

{"preset": [],"plugins": []
}
复制代码

babel-preset

• flow：包含 flow type 所需插件
• es2015：包含 es2015 语法标准所有相关插件
• es2016：包含 es2016 语法标准所有相关插件
• es2017：包含 es2017 语法标准所有相关插件
• latest：包含从 2015 开始历年语法标准所有相关插件
• env：在 latest 基础上提供环境配置能力，比如可以配置只支持某一个浏览器的某几个版本，会自动按需启用、禁用插件
• stage-0：包含处于标准提案 stage 0 阶段的语法所有相关插件
• stage-1：包含处于标准提案 stage 1 阶段的语法所有相关插件
• stage-2：包含处于标准提案 stage 2 阶段的语法所有相关插件
• stage-3：包含处于标准提案 stage 3 阶段的语法所有相关插件

babel-register

只需要引入babel-register就可以运行babel，但不适合生产环境，生产环境应该预先编译好代码，可以在本地使用

• 安装

yarn add babel-register
复制代码

• 使用

// 在入口文件顶部引入
import 'babel-register'
复制代码

babel-polyfill

通过babel编译过的代码并不是所有环境都能执行，babel-polyfill可以在当前运行环境中用来复制尚不存在的API的代码，让开发者可以提前使用还不可用的APIs

• 使用

// 在入口文件顶部引入
import 'babel-polyfill'
复制代码

babel-runtime

babel为了保持生成代码的整洁，会把一些为了兼容的辅助工具代码放进统一的“运行时”中去，就不需要在每个文件中引入辅助代码了，必须安装babel-plugin-transform-runtime和 babel-runtime

• 安装

yarn add babel-plugin-transform-runtime -D
yarn add babel-runtime -D
复制代码

• 配置

{"plugins": ["transform-runtime","transform-es2015-classes"]
}
复制代码

• 效果

// 编译前
class Foo {method() {}
}// 编译后
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";let Foo = function () {function Foo() {_classCallCheck(this, Foo);}_createClass(Foo, [{key: "method",value: function method() {}}]);return Foo;
}();
复制代码

配置babel

• 插件

// .babelrc
{"plugins": [// 这里添加插件["transform-es2015-classes", { "loose": true }]]
}
复制代码

• 环境

当前环境可以使用 process.env.BABEL_ENV 来获得。 如果 BABEL_ENV 不可用，将会替换成 NODE_ENV，并且如果后者也没有设置，那么缺省值是"development"

{"env": {// 开发环境配置"development": {"plugins": [...]},// 生产环境配置"production": {"plugins": [...]}}
}
复制代码

• target

可以配置最低的运行环境

{"targets": {"chrome": "58","ie": "11"}
}
复制代码

最后

ok！babel的配置和javascript历史还是挺有关系的，理解了javascript历史能够更好的理解babel的配置

参考链接

babel手册