Nowa 極簡(jiǎn)教程：立即上手 webpack & react 開發(fā)生態(tài)環(huán)境

Nowa 省去了用戶研究打包，開發(fā)，模擬數(shù)據(jù)等 N 項(xiàng)變態(tài)又無聊的工作。用戶可以直接上手寫業(yè)務(wù)代碼，不用考慮如何壓縮合并代碼，如何熱加載，如何代理資源等等，如何配置國(guó)際化功能等等。能偷懶的，我們都幫你做了。

image.png

下載 GUI 工具：

https://nowa-webpack.github.io/

命令行使用：

新項(xiàng)目

使用

可以通過

nowa init <url>

命令來做項(xiàng)目初始化的操作。

如果提示找不到 init 命令，請(qǐng)通過

nowa install init

來安裝

nowa init https://github.com/nowa-webpack/template-uxcore/archive/v2.zip

<url>

為項(xiàng)目模板 zip 包下載地址或下載地址的快捷命令，例如可以通過快捷命令達(dá)到和以上命令同樣的效果：

mkdir test && cd test
nowa init uxcore

主要有以下快捷映射：

h5、salt

=>

https://github.com/nowa-webpack/template-salt/archive/master.zip

web、uxcore

=>

https://github.com/nowa-webpack/template-uxcore/archive/v2.zip

全部映射可查看這里。

{
  "h5": "https://github.com/nowa-webpack/template-salt/archive/v3.zip",
  "salt": "https://github.com/nowa-webpack/template-salt/archive/v3.zip",
  "web": "https://github.com/nowa-webpack/template-uxcore/archive/v5.zip",
  "uxcore": "https://github.com/nowa-webpack/template-uxcore/archive/v5.zip",
  "refast": "https://github.com/nowa-webpack/template-uxcore/archive/v5.zip",
  "no-flux": "https://github.com/nowa-webpack/template-uxcore/archive/v5.zip",
  "amaze": "https://github.com/nowa-webpack/template-amaze/archive/master.zip",
  "antdmobile": "https://github.com/nowa-webpack/template-antdmobile/archive/master.zip"
}

當(dāng)回答完一些必要的問題之后，腳手架會(huì)開始自動(dòng)生成和初始化項(xiàng)目。

image.png

等待初始化完畢后，便可直接通過

nowa server

或

npm start

來啟動(dòng)開發(fā)服務(wù)器。

參數(shù)

nowa init

在初始化新項(xiàng)目時(shí)，接受以下候選參數(shù)：

  • -f, --force

    是否強(qiáng)制更新模板 如果不給出

    force

    參數(shù)，模板將在本地緩存 24 小時(shí)，在 24 小時(shí)后的第一次執(zhí)行時(shí)自動(dòng)檢查并下載更新

  • -a, --as

    模板路徑的別名 如果指定了模板路徑的別名，則下次可通過模板路徑別名替代完整的模板路徑來初始化項(xiàng)目
    例如：

    nowa init https://github.com/nowa-webpack/template-uxcore/archive/master.zip -a ux

第二次可使用以下命令有同樣的效果：

nowa init ux
image.png

新頁面

使用

可以通過

nowa init page

命令來做頁面初始化的操作。

如果提示找不到 init 命令，請(qǐng)通過

nowa install init

來安裝

nowa init page

該命令必須使用在通過

nowa init

創(chuàng)建的項(xiàng)目中，可在項(xiàng)目中的任意目錄下執(zhí)行。

當(dāng)回答完一些必要的問題之后，腳手架會(huì)開始自動(dòng)生成新頁面相關(guān)文件（包括 html、js 和 css）。

image.png

等待初始化完畢后，便可直接通過

nowa server

或

npm start

來啟動(dòng)開發(fā)服務(wù)器，訪問到新建的頁面。

參數(shù)

nowa init page

在初始化新頁面時(shí)，接受以下候選參數(shù)：

  • -t, --template <url>

    用戶指定所使用的項(xiàng)目模板，一般定義在

    abc.json

    的

    options

    屬性中，必須給出

  • -f, --force

    是否強(qiáng)制更新模板 如果不給出

    force

    參數(shù)，模板將在本地緩存 24 小時(shí)，在 24 小時(shí)后的第一次執(zhí)行時(shí)自動(dòng)檢查并下載更新

新模塊

使用

可以通過

nowa init mod

命令來做模塊初始化的操作。

如果提示找不到 init 命令，請(qǐng)通過

nowa install init

來安裝

nowa init mod

該命令必須使用在通過

nowa init

創(chuàng)建的項(xiàng)目中，可在項(xiàng)目中的任意目錄下執(zhí)行。

當(dāng)回答完一些必要的問題之后，腳手架會(huì)開始自動(dòng)生成新模塊相關(guān)文件（包括 js 和 css）。

image.png

等待初始化完畢后，便可在其他頁面或模塊中引用新建的模塊了。

var TestMod = require('../../components/test-mod');

遠(yuǎn)程調(diào)試

開發(fā)服務(wù)器的轉(zhuǎn)發(fā)配置

nowa server

標(biāo)配了遠(yuǎn)程調(diào)試的功能，該功能所做的事情是：將開發(fā)服務(wù)器中（指定路由下）找不到的資源請(qǐng)求轉(zhuǎn)發(fā)到指定的服務(wù)器。

單規(guī)則配置

nowa server

提供

proxy

參數(shù)用于配置轉(zhuǎn)發(fā)規(guī)則，例如有以下配置：

abc.json

{
  "options": {
    "port": 3000,
    "proxy": "http://127.0.0.1:9077/admin"
  }
}

那么對(duì)于

http://127.0.0.1:3000/index.htm

的訪問，

  • 如果開發(fā)服務(wù)器存在靜態(tài)資源

    /index.htm，則返回

    /index.htm

  • 如果開發(fā)服務(wù)器不存在靜態(tài)資源

    /index.htm，則轉(zhuǎn)發(fā)到

    http://127.0.0.1:9077/admin/index.htm

多規(guī)則配置

proxy

參數(shù)也可傳遞一個(gè)對(duì)象，形如：

abc.json

{
  "options": {
    "port": 3000,
    "proxy": {
      "/api": "http://10.125.55.239:9077",
      "*": "http://127.0.0.1:9077"
    }
  }
}

那么對(duì)于

http://127.0.0.1:3000/api/getSomeInfo.json

的訪問，

  • 如果開發(fā)服務(wù)器存在靜態(tài)資源

    /api/getSomeInfo.json，則返回

    /api/getSomeInfo.json

  • 如果開發(fā)服務(wù)器不存在靜態(tài)資源

    /api/getSomeInfo.json，則轉(zhuǎn)發(fā)到

    http://10.125.55.239:9077/api/getSomeInfo.json

同樣的，對(duì)于其他的非

/api

開頭的請(qǐng)求（匹配

"*"），則轉(zhuǎn)發(fā)到

http://127.0.0.1:9077。

代理服務(wù)器的規(guī)則配置

nowa proxy

是一個(gè)功能強(qiáng)大的代理服務(wù)器，基于

AnyProxy

做了封裝，提供更為靈活的規(guī)則邏輯配置。

如果提示找不到 proxy 命令，請(qǐng)通過

nowa install proxy

來安裝

nowa proxy

參數(shù)列表

nowa proxy

接受以下候選參數(shù)：

  • --mappings

    代理映射配置

  • -r, --rule <path>

    規(guī)則定義文件路徑，規(guī)則定義文件將會(huì)覆蓋代理映射配置

  • -t, --throttle <throttle>

    模擬網(wǎng)絡(luò)限速（kb/s）

  • -s --silent

    不輸出日志到終端

mappings

中每條規(guī)則定義如下：

"<METHOD> //<HOSTNAME>[:<PORT>]/[PATH]": "http://<HOSTNAME1>[:<PORT1>]/[PATH1]"

其中左邊為篩選表達(dá)式，右邊為目標(biāo)表達(dá)式

  • METHOD

    請(qǐng)求方法，僅可用于篩選，可選值

    GET | POST | *

  • HOSTNAME

    請(qǐng)求域名，用于篩選和目標(biāo)，兩邊必須都給出

  • PORT

    請(qǐng)求端口，用于篩選和目標(biāo)，若在目標(biāo)表達(dá)式中未給出則仍維持篩選表達(dá)式中的值，若在篩選表達(dá)式中未給出則不對(duì)端口做限定

  • PATH

    請(qǐng)求路徑，用于篩選和目標(biāo)，其中小括號(hào)括起的部分映射后將拼接到

    PATH1

    之后

例如有以下配置：

abc.json

{
  "options": {
    "port": 3000,
    "mappings": {
      "GET //localhost:3000/(admin/meeting/mobile/*.json)": "http://a-work.alibaba-inc.com:443"
    }
  }
}

則對(duì)于

https://localhost:3000/admin/meeting/mobile/apply/GetList.json

的請(qǐng)求將被轉(zhuǎn)發(fā)到

https://a-work.alibaba-inc.com/admin/meeting/mobile/apply/GetList.json

UXCO

http://uxco.re/

image.png
image.png

React 組件使用文檔：

http://uxco.re/components/button/

image.png
image.png

0. 為什么我們需要 UXCore？

UXCore 是一個(gè)基于 React 的 PC UI 套件庫，兼容 IE8+。http://uxco.re/

阿里巴巴信息平臺(tái)是負(fù)責(zé)整個(gè)阿里巴巴集團(tuán)智能辦公系統(tǒng)的團(tuán)隊(duì)，涉及非常多的企業(yè)業(yè)務(wù)系統(tǒng)，包括薪酬、人力、財(cái)務(wù)、行政、IT 等等，在這些系統(tǒng)中產(chǎn)生了大量的表格、表單和圖表的交互場(chǎng)景，這里面有很多重復(fù)配置的地方，也有很多定制變化的地方，目前業(yè)界的這一方面還沒有能夠完全滿足這一方面的解決方案，因此有了 UXCore。

UXCore 要解決的核心問題，就是方便高效地產(chǎn)出表單、表格，同時(shí)提供足夠強(qiáng)大的定制能力，使用戶可以對(duì)組件的每一個(gè)渲染部分進(jìn)行修改，從而滿足各種不同種類的業(yè)務(wù)場(chǎng)景。

為了實(shí)現(xiàn)核心的目標(biāo)，我們和 UED 團(tuán)隊(duì)積極合作，充分收集業(yè)務(wù)場(chǎng)景和進(jìn)行視覺優(yōu)化，在這個(gè)過程我們產(chǎn)出了一系列的簡(jiǎn)單易用的基礎(chǔ)組件，用于構(gòu)建頁面的其他部分。目前信息平臺(tái)的新系統(tǒng)都在使用 UXCore 進(jìn)行承載，我們也很愿意將我們已經(jīng)成熟的解決方案分享出來，幫助更多的企業(yè)系統(tǒng)開發(fā)者解決他們開發(fā)上的痛苦，同時(shí)也寄希望于依靠社區(qū)的反饋，可以讓 UXCore 走的更好。

1. UXCore 有哪些特性。

1.1 豐富的組件

超過 35 個(gè)常用基礎(chǔ)組件用來構(gòu)建你的系統(tǒng)業(yè)務(wù)，涵蓋大部分常用功能

1.2 專注于企業(yè)應(yīng)用

圖2：UXCore 致力于產(chǎn)出方便易用、功能強(qiáng)大且高度可定制的表單、表格、布局組件。'

  • 表單內(nèi)置 10 余種常用表單域可以直接使用。

  • 表格除了基礎(chǔ)功能外，還支持折疊展開二級(jí)面板、樹形結(jié)構(gòu)、行內(nèi)編輯等復(fù)雜場(chǎng)景。

  • 布局支持傳統(tǒng)的左右自適應(yīng)布局和柵格布局，輕松搞定頁面排版。

  • 除了內(nèi)置的功能外，表單、表格還有一套簡(jiǎn)易地定制體系，隨時(shí)可以在業(yè)務(wù)中為組件注入更強(qiáng)大的力量。

1.3 全面的國(guó)際化支持

所有組件的內(nèi)置文案支持國(guó)際化，大部分文案用戶可以主動(dòng)設(shè)置。

1.4 可以定制的主題

我們默認(rèn)提供了兩套主題供使用，這兩套主題也同時(shí)在我們的系統(tǒng)中使用，如果你不喜歡我們的主題，你也可以使用我們的在線定制工具定制你的主題，我們目前開放了所有顏色的定制，未來可能會(huì)開放更多的定制點(diǎn)。

1.5 按需使用

UXCore 的每個(gè)組件都是單獨(dú)項(xiàng)目維護(hù)的，并且也會(huì)單獨(dú)發(fā)布于 npm，因此如果你不喜歡引用 UXCore 的大全包，你也可以單獨(dú)引用獨(dú)立的組件使用。同時(shí)，修改 UXCore 原有的樣式也十分簡(jiǎn)單，只需修改類名前綴(prefixCls)，即可定制屬于自己的 UXCore 組件風(fēng)格。

1.6 提供項(xiàng)目級(jí)的建議和支持

如果你苦于搭建使用 React 和 UXCore 的項(xiàng)目環(huán)境，可以參考我們的

starter kit，在這里我們給出了團(tuán)隊(duì)在眾多項(xiàng)目實(shí)踐總結(jié)出的統(tǒng)一解決方案(NOWA)，供你參考。

2. UXCore 正在做的事情

2.1 更加值得信賴

為了保證后續(xù)迭代和社區(qū)貢獻(xiàn)的質(zhì)量，我們會(huì)積極地接入代碼風(fēng)格校驗(yàn)和持續(xù)集成測(cè)試，目前我們的方案已經(jīng)確定，正在向所有的組件進(jìn)行推廣。

2.2 可視化頁面搭建

通過在線可視化的頁面，通過拖拽和簡(jiǎn)單配置來實(shí)現(xiàn)簡(jiǎn)單交互頁面的搭建，同時(shí)輸出代碼，用以后續(xù)更改和添加代碼。

2.3 持續(xù)的功能增強(qiáng)

借助社區(qū)和團(tuán)隊(duì)自身的力量，UXCore 會(huì)在現(xiàn)有基礎(chǔ)上優(yōu)化使用體驗(yàn)，增強(qiáng)組件功能，添加更多常用組件來滿足不同場(chǎng)景的需求。

3. 鏈接

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,502評(píng)論 19贊 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,725評(píng)論 25贊 709
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 47,253評(píng)論 6贊 342
  • 寒假最后一次，或者倒數(shù)第二次發(fā)圖。 圖右的肩膀有點(diǎn)寬，沒來得及修，就這樣吧。 希望能繼續(xù)畫下去。
    妖囈怪談閱讀 255評(píng)論 3贊 4
  • 想著寫些東西紀(jì)錄一下自己2015年無畏、果決、豐滿卻又貧瘠的生活。反復(fù)提筆卻又多次放下。 2015.1.1 我的A...
    我是Miss柒閱讀 634評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容