ES6新特性之转码器(UmiJS入门)

转码器

Babel (babeljs.io)是一个广为使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而 在浏览器或其他环境执行 。

Google 公司的 Traceur 转码器 Cgithub.com/google/traceur-compiler)， 也可 以将 ES6 代码转为ES5的代码。

这2款都是非常优秀的转码工具，在本套课程中并不会直接使用，而是会使用阿里的开源企业级react框架：UmiJS。

了解UmiJS

官网：https://umijs.org/zh/

UmiJS 读音：（乌米）

特点：

   插件化

                 umi 的整个生命周期都是插件化的，甚至其内部实现就是由大量插件组成，比如 pwa、按需加载、一键切换 preact、一键兼容 ie9 等等，都是由插件实现。

开箱即用

              你只需一个 umi 依赖就可启动开发，无需安装 react、preact、webpack、react-router、babel、jest 等等。

约定式路由

             类 next.js 的约定式路由，无需再维护一份冗余的路由配置，支持权限、动态路由、嵌套路由等等。

部署安装

#首先，需要安装Node.js
#在资料中，找到node-v8.12.0-x64.msi，一路下一步安装
#安装完成后，通过node -v 命令查看其版本号
F:\code\itcast-es6>node -v
v8.12.0
#接下来，开始安装yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些
#可以把yarn看做了优化了的npm
npm i yarn tyarn -g #-g 是指全局安装
tyarn -v #进行测试，如果能够正常输出版本信息则说明安装成功了
#如果安装失败，是由于将yarn添加到环境变量中导致，参见
http://www.easysb.cn/index.php/2017/06/04/11/
#下面开始安装umi
tyarn global add umi
umi #进行测试

快速入门

#通过初始化命令将生成package.json文件，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。
tyarn init -y
#通过umi命令创建index.js文件
umi g page index #可以看到在pages下创建好了index.js和index.css文件
#将下面内存拷贝到index.js文件中进行测试
@T //通过@符号进行引用该方法，类似java中的注解
class User {
constructor(name, age = 20){
this.name = name;
this.age = age;
}
}
function T(target) { //定义一个普通的方法
console.log(target); //target对象为修饰的目标对象，这里是User对象
target.country = "中国"; //为User类添加一个静态属性country
}
console.log(User.country); //打印出country属性值
#通过命令行启动umi的后台服务,用于本地开发
umi dev
#通过浏览器进行访问：http://localhost:8000/，查看效果
#值得注意的是，这里访问的是umi的后台服务，不是idea提供的服务

查看编码后的js文件：

var _class;

var User = T(_class = class User {
  constructor(name) {
    var age = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
    this.name = name;
    this.age = age;
  }

}) || _class;

function T(target) {
  // target:被修饰的对象
  console.log(target);
  target.country = "中国"; // 通过修饰器添加的属性是静态属性
}

console.log(User.country);