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
例如以下运行结果
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