Nowa 省去了使用者研究打包，開發，模擬資料等 N 項變態又無聊的工作。使用者可以直接上手寫業務程式碼，不用考慮如何壓縮合並程式碼，如何熱載入，如何代理資源等等，如何配置國際化功能等等。能偷懶的，我們都幫你做了。

下載 GUI 工具：

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

命令列使用：

新專案

---

使用

可以通過

nowa init <url>

命令來做專案初始化的操作。

如果提示找不到 init 命令，請通過

nowa install init

來安裝

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

<url>

為專案模板 zip 包下載地址或下載地址的快捷命令，例如可以通過快捷命令達到和以上命令同樣的效果：

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

當回答完一些必要的問題之後，腳手架會開始自動生成和初始化專案。

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

nowa server

或

npm start

來啟動開發伺服器。

引數

nowa init

在初始化新專案時，接受以下候選引數：

• -f, --force

  是否強制更新模板 如果不給出

  force

  引數，模板將在本地快取 24 小時，在 24 小時後的第一次執行時自動檢查並下載更新

• -a, --as

  模板路徑的別名 如果指定了模板路徑的別名，則下次可通過模板路徑別名替代完整的模板路徑來初始化專案
  例如：

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

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

nowa init ux

新頁面

---

使用

可以通過

nowa init page

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

如果提示找不到 init 命令，請通過

nowa install init

來安裝

nowa init page

該命令必須使用在通過

nowa init

建立的專案中，可在專案中的任意目錄下執行。

當回答完一些必要的問題之後，腳手架會開始自動生成新頁面相關檔案（包括 html、js 和 css）。

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

nowa server

或

npm start

來啟動開發伺服器，訪問到新建的頁面。

引數

nowa init page

在初始化新頁面時，接受以下候選引數：

• -t, --template <url>

  使用者指定所使用的專案模板，一般定義在

  abc.json

  的

  options

  屬性中，必須給出

• -f, --force

  是否強制更新模板 如果不給出

  force

  引數，模板將在本地快取 24 小時，在 24 小時後的第一次執行時自動檢查並下載更新

新模組

---

使用

可以通過

nowa init mod

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

如果提示找不到 init 命令，請通過

nowa install init

來安裝

nowa init mod

該命令必須使用在通過

nowa init

建立的專案中，可在專案中的任意目錄下執行。

當回答完一些必要的問題之後，腳手架會開始自動生成新模組相關檔案（包括 js 和 css）。

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

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

遠端除錯

---

開發伺服器的轉發配置

nowa server

標配了遠端除錯的功能，該功能所做的事情是：將開發伺服器中（指定路由下）找不到的資源請求轉發到指定的伺服器。

單規則配置

nowa server

提供

proxy

引數用於配置轉發規則，例如有以下配置：

abc.json

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

那麼對於

http://127.0.0.1:3000/index.htm

的訪問，

• 如果開發伺服器存在靜態資源

  /index.htm，則返回

  /index.htm

• 如果開發伺服器不存在靜態資源

  /index.htm，則轉發到

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

多規則配置

proxy

引數也可傳遞一個物件，形如：

abc.json

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

那麼對於

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

的訪問，

• 如果開發伺服器存在靜態資源

  /api/getSomeInfo.json，則返回

  /api/getSomeInfo.json

• 如果開發伺服器不存在靜態資源

  /api/getSomeInfo.json，則轉發到

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

同樣的，對於其他的非

/api

開頭的請求（匹配

"*"），則轉發到

http://127.0.0.1:9077。

代理伺服器的規則配置

nowa proxy

是一個功能強大的代理伺服器，基於

AnyProxy

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

如果提示找不到 proxy 命令，請通過

nowa install proxy

來安裝

nowa proxy

引數列表

nowa proxy

接受以下候選引數：

• --mappings

  代理對映配置

• -r, --rule <path>

  規則定義檔案路徑，規則定義檔案將會覆蓋代理對映配置

• -t, --throttle <throttle>

  模擬網路限速（kb/s）

• -s --silent

  不輸出日誌到終端

mappings

中每條規則定義如下：

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

其中左邊為篩選表示式，右邊為目標表示式

• METHOD

  請求方法，僅可用於篩選，可選值

  GET | POST | *

• HOSTNAME

  請求域名，用於篩選和目標，兩邊必須都給出

• PORT

  請求埠，用於篩選和目標，若在目標表示式中未給出則仍維持篩選表示式中的值，若在篩選表示式中未給出則不對埠做限定

• PATH

  請求路徑，用於篩選和目標，其中小括號括起的部分對映後將拼接到

  PATH1

  之後

例如有以下配置：

abc.json

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

則對於

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

的請求將被轉發到

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

UXCO

http://uxco.re/

React 元件使用文件：

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

0. 為什麼我們需要 UXCore？

UXCore 是一個基於 React 的 PC UI 套件庫，相容 IE8+。http://uxco.re/

阿里巴巴資訊平臺是負責整個阿里巴巴集團智慧辦公系統的團隊，涉及非常多的企業業務系統，包括薪酬、人力、財務、行政、IT 等等，在這些系統中產生了大量的表格、表單和圖表的互動場景，這裡面有很多重複配置的地方，也有很多定製變化的地方，目前業界的這一方面還沒有能夠完全滿足這一方面的解決方案，因此有了 UXCore。

UXCore 要解決的核心問題，就是方便高效地產出表單、表格，同時提供足夠強大的定製能力，使使用者可以對元件的每一個渲染部分進行修改，從而滿足各種不同種類的業務場景。

為了實現核心的目標，我們和 UED 團隊積極合作，充分收集業務場景和進行視覺優化，在這個過程我們產出了一系列的簡單易用的基礎元件，用於構建頁面的其他部分。目前資訊平臺的新系統都在使用 UXCore 進行承載，我們也很願意將我們已經成熟的解決方案分享出來，幫助更多的企業系統開發者解決他們開發上的痛苦，同時也寄希望於依靠社群的反饋，可以讓 UXCore 走的更好。

1. UXCore 有哪些特性。

1.1 豐富的元件

超過 35 個常用基礎元件用來構建你的系統業務，涵蓋大部分常用功能

1.2 專注於企業應用

圖2：UXCore 致力於產出方便易用、功能強大且高度可定製的表單、表格、佈局元件。`

• 表單內建 10 餘種常用表單域可以直接使用。

• 表格除了基礎功能外，還支援摺疊展開二級皮膚、樹形結構、行內編輯等複雜場景。

• 佈局支援傳統的左右自適應佈局和柵格佈局，輕鬆搞定頁面排版。

• 除了內建的功能外，表單、表格還有一套簡易地定製體系，隨時可以在業務中為元件注入更強大的力量。

1.3 全面的國際化支援

所有元件的內建文案支援國際化，大部分文案使用者可以主動設定。

1.4 可以定製的主題

我們預設提供了兩套主題供使用，這兩套主題也同時在我們的系統中使用，如果你不喜歡我們的主題，你也可以使用我們的線上定製工具定製你的主題，我們目前開放了所有顏色的定製，未來可能會開放更多的定製點。

1.5 按需使用

UXCore 的每個元件都是單獨專案維護的，並且也會單獨釋出於 npm，因此如果你不喜歡引用 UXCore 的大全包，你也可以單獨引用獨立的元件使用。同時，修改 UXCore 原有的樣式也十分簡單，只需修改類名字首(prefixCls)，即可定製屬於自己的 UXCore 元件風格。

1.6 提供專案級的建議和支援

如果你苦於搭建使用 React 和 UXCore 的專案環境，可以參考我們的

starter kit，在這裡我們給出了團隊在眾多專案實踐總結出的統一解決方案(NOWA)，供你參考。

2. UXCore 正在做的事情

2.1 更加值得信賴

為了保證後續迭代和社群貢獻的質量，我們會積極地接入程式碼風格校驗和持續整合測試，目前我們的方案已經確定，正在向所有的元件進行推廣。

2.2 視覺化頁面搭建

通過線上視覺化的頁面，通過拖拽和簡單配置來實現簡單互動頁面的搭建，同時輸出程式碼，用以後續更改和新增程式碼。

2.3 持續的功能增強

藉助社群和團隊自身的力量，UXCore 會在現有基礎上優化使用體驗，增強元件功能，新增更多常用元件來滿足不同場景的需求。

3. 連結

• github:

  https://github.com/uxcore/uxcore

• 文件站點:

  http://uxco.re/