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);
ES6新特性之转码器(UmiJS入门)相关推荐
- lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法?
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧 接 ...
- es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令 前端开发必备 - ES6 新特性之 变量的解构赋值 前端开发必备 - ES6 新特性之 字符串的拓展 前端开发必备 - E ...
- 尚硅谷es6新特性笔记
尚硅谷es6新特性笔记 一.let与const let的变量声明以及声明特性 const的变量声明以及声明特性 const.let.var 三者之间的区别 二.变量解构赋值 三.模板字符串 四.对象的 ...
- ES6新特性----面试
ES6新特性 关键字 let关键字 const关键字 解构赋值 变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 用途 模板字符串 箭头函数 ...
- ES6新特性(部分语法)
ES6新特性 文章目录 ES6新特性 1.0let关键字 1.1let小案例 1.2const关键字 1.3解构赋值 1.4模板字符串 1.5简化对象写法 1.6箭头函数 1.7箭头函数的案例 1.7 ...
- 一文快速掌握 es6+新特性及核心语法
首先先祝各位节日快乐,好好去体验生活的快乐,在假期最后一天里,祝大家收获满满,同时抓住假期的尾巴,收割实用技能. 接下来我会总结一些工作中常用也比较核心的es6+的语法知识,后面又要慢慢开始工作之旅了 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6新特性之了解ES6以及其发展历史
ES6 新特性 现在使用主流的前端框架中,如ReactJS.Vue.js.angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性 ...
最新文章
- python中星号怎么打出来_Python打印“菱形”星号代码方法
- 搞懂单链表常见面试题
- java读取jsp文件内容_使用Java读取Excel文件内容
- 判断给定的整数数组是不是某二叉搜索树的后序遍历的结果
- netstat 命令的 学习笔记
- phpcms漏洞总结
- python简述文件目录相对路径_【Python】 配置文件相对路径软件自动执行的工作目录...
- 地质灾害防治条例释义的摘要
- matplotlib中文乱码问题_MacOS解决Matplotlib的中文乱码问题
- win32开发(消息机制)
- android跨进程关闭服务器,Android IPC机制(五)用Socket实现跨进程聊天程序
- C++const类型
- 《C专家编程》读书笔记(1)
- 浮点数与32位16进制互转(有代码)
- 几款磁力搜索引擎,找资料更方便
- HDUOJ 6707 Shuffle Card
- 2022乐鑫数字芯片提前批笔试
- 【Go语言学习】——HTTP客户端和服务端
- python3 大文件去重
- Selector多路复用器原理
热门文章
- LTE Module User Documentation(翻译5)——Mobility Model with Buildings
- JavaScript_process01
- javascript,jquery 操作 dropdownlist ,select
- 在WPF程序中使用多线程技术
- 新疆出差——特色美食大合集
- pta_l1-6(连续因子)
- ceph13 快速编译 v13.2.4 --2019_8
- python open 追加
- 1112 Stucked Keyboard
- Python和Java就业前景对比