轉碼器

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入门)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。