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手册

stage?es6?es7?速览javascript版本和babel配置