1. 现代 javascript 用法 简介 及 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实现版本引用到业务代码中. 使用什么特性, 就引用什么, 并且不会污染全局.
