Babel:是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有的环境执行,而不用担心现有环境是否支持。(源代码到源代码的编译器)。
input.map(item => item + 1); //转码前
input.map(function(item){
return item + 1;
});
{
"presets":["es2015", "react"], //根据自身的需求下载规则集,将这些加入到配置文件中
"plugin":[]
}
--- mkdir mybabel //新建mybabel文件夹
--- cd mybabel //进入mybabel文件夹
--- npm init //初始化npm,一路点击enter进行
--- npm install //安装npm
--- sudo npm install --save -dev babel-d
--- sudo install --save -dev babe l-preset-es2015
--- npm run build //运行该指令,将src下的ES6代码自动转为并生成lib文件夹下的ES5代码
--- babel-node src/main.js //运行src下的main.js文件
-react小组件代码
import React from 'react';
import 'qnui/lib/DatePicker/index.css';
import DatePicker, { RangePicker } from 'qnui/lib/DatePicker';
class CalendarComponent extends React.Component {
render() {
return (
<div>
<RangePicker />
</div>
);
}
}
module.exports = CalendarComponent;
最常用的ES6特性
let const class extends super arrow Function template string
destructuring default rest -- arguement
let: 这两个的用途与var类似,都是用来声明变量,但ES5只有全局作用域和函数作用域,没有块作用域。而let则比实际上为JavaScript新增了块级作用域。用它所声明的变量,只有let命名的代码块内有效。
const: 也用来声明变量。一旦声明变量,常量的值就不能改变。
module n 模块,组件 deploy v 施展,使展开 optimize vt最优化 optimized a 最优化的 derivation n 衍生物 minified a 微小的 disclaimer n 免责声明书 plugin n 插件 compose v 组成 preset v 预设值 annotation n 注释 transformation n 转换 parse v 从语法上分析 compiler n 编译器 ratify v批准 许可 proposal n 提议 strawman n 起草 candidate v 申请 n 候选人 mutator n 设置方法
相关文章推荐: