ES6概念语法篇

一、概念语法篇

1、概念

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等。Node.js 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高。

2、可以查看 Node.js 默认没有打开的 ES6 实验性语法。

$ node --v8-options | grep harmony

3、 Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。

$ npm install --save-dev @babel/core

4、配置文件.babelrc 

# 最新转码规则
#$ npm install --save-dev @babel/preset-env

# react 转码规则
#$ npm install --save-dev @babel/preset-react

{
  "presets": [
     "@babel/env",
      "@babel/preset-react"
],
  "plugins": []
}

 5、命令行转码

 

#加载命令编译环境
$ npm install --save-dev @babel/cli


# 转码结果输出到标准输出
$ npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib

# -s 参数生成source map文件
$ npx babel src -d lib -s

6、加载文件（babel/register 模块）模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码。

#引入@babel/register模块（linux）
$ npm install --save-dev @babel/register


//使用时，必须首先加载@babel/register。(js)
//@babel/register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。
// index.js
require('@babel/register');
require('./es6.js');

7、转译重点

#Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API
#但如果想转译Array.from方法，可以使用core-js和regenerator-runtime
#（Linux）
$ npm install --save-dev core-js regenerator-runtime

//(JS)
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime);

//Babel 也可以用于浏览器环境，使用@babel/standalone模块提供的浏览器版本，将其插入网页。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>