ES6学习笔记1: es6的简单了解

参考资料:http://es6.ruanyifeng.com/#docs/intro

es6和JavaScript的关系:前者是后者的规格标准,后者是前者的实现。

ESMAScript的提案查看网址https://github.com/tc39/ecma262

各大浏览器的最新版本,对 ES6 的支持可以查看kangax.github.io/compat-table/es6/

系统对es6支持程度查看:

$ npm install -g es-checker
$ es-checker

例如以下运行结果

ES6学习笔记1: es6的简单了解

 babel转换器:能把es6的代码转换为es5的代码,从而在现有环境执行。

.babelrc:是babel的配置文件,放在项目的根目录下,要想使用babel,第一步就是要配置该文件,其基本格式如下:

presets: [],
plugins: []

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

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

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

然后,将这些规则加入.babelrc

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

注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc

1,@babel/cli: 使用命令行将es6代码转化为es6代码

安装:

npm i --save-dev @babel/cli

命令:

npx babel fillName

2,@babel/node: 提供支持node的REPL(读取,执行,打印,循环)环境

安装:

npm install --save-dev @babel/node

进入环境的命令:

npx babel-node

或者直接运行文件里的内容:

npx babel-node es6.js // 假设es6.js的内容是console.log(2121),则运行后控制台打印出2121

3,@babel/core:如果转换需要使用到babel里的api,则需要引入@babel/core

安装:

npm i --save-dev @babel/core

使用:(例子)

var babel = require('@babel/core');

// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }

// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
  result; // => { code, map, ast }
});

// 文件转码(同步)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

4,@babel-polyfill:babel默认只转换新的句法,而不转换新的api,这个就是为了解决这种问题

安装:

npm i --save-dev @babel/polyfill

使用:在需要的地方import或者require

import '@babel/polyfill';
// 或者
require('@babel/polyfill');

5,@babel/register :改写require命令,每当使用require加载.js.jsx.es.es6后缀名的文件,就会先用 Babel 进行转码。

安装:

npm i --save-dev @babel/register

此外,还有google的traceur转码器