2021-09-08js4 分钟读完 (大约 611 个字)

ES6学习笔记——简介

es6笔记

ECMAScript和JavaScript的关系

ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现（还有JScript和ActionScript）。
日常场合，这两个词是可以互换的。

ES6与ECMAScript2015的关系

ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。本书中提到ES6的地方，一般是指ES2015标准，但有时也是泛指“下一代JavaScript语言”。

ECMAScript的历史

Node.js是JavaScript的服务器运行环境（runtime）。它对ES6的支持度更高。除了那些默认打开的功能，还有一些语法功能已经实现了，但是默认没有打开。使用下面的命令，可以查看Node.js默认没有打开的ES6实验性语法。

# Linux & Mac
$ node --v8-options | grep harmony

# Windows
$ node --v8-options | findstr harmony

Babel转码器

Babel是一个es6转码器，可以将es6转为es5代码以提高es6代码的向下兼容。

实例

比如：

// 转码前, es6的肩头函数
input.map(item => item + 1);

// 转码后, es5的普通函数
input.map(function(item) {
    return item + 1;
});

安装

在项目目录中使用Babel：

1	cnpm install --save-dev @babel/core

配置文件

安装完了第一步就是要配置 .babelrc 文件。

配置文件存在于项目根目录下，用于配置转码规则和插件：

{
    // 用于设定转码规则
    "presets": [],

    // 用于设定插件 
    "plugins": []
}

安装转码规则：

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

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

添加到 .babelrc :

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

命令行转码

安装命令行转码器：

1	cnpm 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