ECMAScript 简介 及 babel

简介

　　包含 ECMAScript 基本概念，babel 使用 ，eslint 使用 以及新语法的介绍 和使用经验

 

ECMAScript 概念

　　ECMASctipt 是一种由 Ecma （前身为欧洲计算机执照协会）通过 ECMA-262 标准化的脚本程序设计语言。这种语言在 万维网 上应用广泛， 它往往被成为 JavaScript 或者 JScript， 但实际上后后两者是 ECMA-262 标准的实现和 拓展

 

ES6 、 ES2015 是什么

　　ES6的第一个版本, 在2015年6月发布, 正式名称就是《ECMAScript 2015标准》(简称 ES2015)

　　2016年6月, 小幅修订的《ECMAScript 2016标准》(简称 ES2016)发布, 这个版本可以看作是 ES6.1 版

　　ES6 既是一个历史名词, 也是一个泛指, 含义是5.1版以后的JavaScript的下一代标准, 涵盖了ES2015、ES2016、ES2017等等

 

tc39 是 什么 （官网）

介绍

任何人都可以向标准委员会(又称TC39委员会)提案, 要求修改语言标准.

一种新的语法从提案到变成正式标准, 需要经历五个阶段. 每个阶段的变动都需要由 TC39 委员会批准.

Stage 0 - Strawman(展示阶段)
Stage 1 - Proposal(征求意见阶段)
Stage 2 - Draft(草案阶段)
Stage 3 - Candidate(候选人阶段)
Stage 4 - Finished(定案阶段)

一个提案只要能进入 Stage 2, 就差不多肯定会包括在以后的正式标准里面.

 

babel 基本概念  (官网)

　　babel 是什么？

　　将语法转换为 ES5 老语法的 转译器 (transpiler)

　　相关模块

　　　　babel-core: babel的核心

　　　　babel-cli: babel的命令行工具

　　　　babel-plugin: 语法插件

　　　　babel-preset: 语法插件的集合(语法的集合就是语言的版本)

　　babel 安装

　　　　npm i babel-cli -g

　　基本使用

　　　　npm i 

　　　　babel es6.js

　　　　#es6.js 文件内容

　　　　const log = (...params) => {console.log(...params)}

　　　　export default log

 

babel-preset-env (强烈推荐)  (资料)

　　好处

　　　　根据配置可以生成兼容不同版本浏览器或者node环境的代码

　　　　可转译所有的新语法，也可以根据环境的兼容性，不转译某些语法

 

babel 配置文件

　　babel 使用的 配置文件

　　　　babel-cli 默认使用 当前目录下的.babelrc 文件作为配置文件，采用json格式

　　babel 不使用 配置文件

　　　　使用--no-babelrc选项可以让babel-cli不是用配置文件, 此时需要使用命令行参数配置babel-cli

　　#案例

{ "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "ie >= 10"] }, "debug": false } ] ], "plugins": [ "transform-class-properties", "transform-decorators-legacy", [ "transform-react-jsx", { "pragma": "React.createElement" } ], [ "transform-runtime", { "helpers": true, "polyfill": true, "regenerator": true, "moduleName": "babel-runtime" } ] ] }

　　

babel 两个插件

　　polyfill 和 transform-runtime

　　　　babel-polyfill   (在 window 对象内加 一些 ES5 特性 然后进行转换)

　　先于业务代码加载到浏览器中的一段脚本, 用ES5实现的版本, 补充浏览器中缺乏的全局对象/类型/函数等新特性

　　　　babel-plugin-transform-runtime (按需加载 没有定义的语法)

 　　babel-polyfill很大.

　　不想污染全局, 比如不想在window添加字段.

　　在babel转译过程中, 在使用了新特性的代码文件头部添加require语句, 将ES5实现版本引用到业务代码中. 使用什么特性, 就引用什么, 并且不会污染全局.