进击的前端--刘健兰

Babel

什么是Babel

• Babel：是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境执行，而不用担心现有环境是否支持。（源代码到源代码的编译器）。

• 示例代码

    input.map(item => item + 1);   //转码前
    input.map(function(item){
         return item + 1;
    });

• 上面的原始代码用了箭头函数，这个特性还没有得到广泛使用，Babel将其转为普通函数，就能在现有的JavaScript环境运行了。

Babel做了什么

• Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步就是配置这个文件。该文件用来设置转码的规则和插件，基本格式如下：

    {
       "presets":["es2015", "react"],   //根据自身的需求下载规则集，将这些加入到配置文件中
       "plugin":[]
    }

如何下载使用Babel

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

-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;

• 引用QNUI写的日历组件

ES6

• 最常用的ES6特性

  let const class extends super arrow Function template string
  destructuring default rest -- arguement

• let: 这两个的用途与var类似，都是用来声明变量，但ES5只有全局作用域和函数作用域，没有块作用域。而let则比实际上为JavaScript新增了块级作用域。用它所声明的变量，只有let命名的代码块内有效。

• const： 也用来声明变量。一旦声明变量，常量的值就不能改变。

• class、extend、super：ES6提供了更为接近传统语言的写法，引入了class类这个概念。新的class写法比对象原型的写法更加清晰，更像面向对象编辑语言，也更加通俗易懂

英文单词

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 设置方法