Ice項目結構理解
上一篇文章對阿里前端框架Ice的項目創建過程進行了詳述（具體見：阿里ICE前端工程創建過程），下面對Ice創建的項目結構進行理解和說明。在Ice官方文檔中有對項目中所具有的所有目錄結構進行的說明，如下：
├── .ice/ # 運行時生成的臨時目錄
├── build/ # 構建產物目錄
├── mock/ # 本地模擬數據
│ ├── index.[j,t]s
├── public/
│ ├── index.html # 應用入口 HTML
│ └── favicon.png # Favicon
├── src/ # 源碼
│ ├── components/ # 自定義業務組件
│ │ └── Guide/
│ │ ├── index.[j,t]sx
│ │ ├── index.module.scss
│ │ └── __tests__ # [可選] 就近測試用例
│ ├── layouts/ # 佈局組件
│ │ └── BasicLayout/
│ │ ├── menuConfig.[j,t]s # 佈局對應的菜單配置
│ │ ├── index.[j,t]sx
│ │ └── index.module.scss
│ ├── pages/ # 頁面
│ │ └── Home/ # home 頁面，約定路由轉成小寫
│ │ ├── components/ # 頁面級自定義業務組件
│ │ ├── model.[j,t]sx # 頁面級數據狀態
│ │ ├── index.[j,t]sx # 頁面入口
│ │ └── index.module.scss # 頁面樣式文件
│ ├── configs/ # [可選] 配置文件
│ │ └── menu.[j,t]s # [可選] 菜單配置
│ ├── models/ # [可選] 應用級數據狀態
│ │ └── user.[j,t]s
│ ├── locales/ # [可選] 國際化資源
│ │ ├── en-US
│ │ └── zh-CN
│ ├── utils/ # [可選] 工具庫
│ ├── global.scss # 全局樣式
│ ├── routes.[j,t]s # 路由配置
│ └── app.[j,t]s[x] # 應用入口腳本
├── build.json # 工程配置
├── README.md
├── package.json
├── .editorconfig
├── .eslintignore
├── .eslintrc.[j,t]s
├── .gitignore
├── .stylelintignore
├── .stylelintrc.[j,t]s
├── .prettierrc.[j,t]s
├── .gitignore
└── [j,t]sconfig.json
如果是自己創建的項目，上面有些目錄結構暫時是不存在的，需要時可以進行創建並使用。下面是自己創建的Ice項目目錄結構，相應的目錄的作用也進行了標註：
.
├── README.md
├── build.json # 工程配置
├── my-ice-start.iml
├── package.json
├── public # 項目公共資源
│ ├── favicon.png # 頁面標籤圖表
│ └── index.html # 項目入口HTML（定義了React的root元素）
├── src # 源文件目錄
│ ├── app.tsx
│ ├── components # 組件所在目錄
│ │ ├── NotFound # 默認創建的組件
│ │ ├── PageLoading # 默認創建的組件
│ │ ├── StartApp # 自定義創建的組件
│ │ ├── StartForm # 同上
│ │ ├── StartTable # 同上
│ │ ├── TicBoard # 同上
│ │ ├── TicGame # 同上
│ │ └── TicSquare # 同上
│ ├── global.scss # 全局樣式文件
│ ├── layouts # 項目佈局組件
│ │ └── BasicLayout # 默認創建的佈局組件
│ ├── pages # 頁面所在目錄
│ │ ├── About # 默認創建的頁面
│ │ ├── Home # 默認創建的頁面
│ │ └── ReactStart # 自定義創建的頁面
│ └── routes.ts # 項目路由配置
└── tsconfig.json
使用Ice搭建React多頁面學習和開發環境
由於最近在學習React的相關知識，而Ice本身就是支持React，因此希望藉助上述創建的項目進行React的學習和開發過程。而我希望的是在一個項目中，具有多個頁面，每個頁面可以根據自己的需求開始一部分React相關知識的學習，而且頁面之間彼此互不影響。而Ice可以很好的滿足我這種學習環境的需求。下面就使用上述創建的Ice項目，進行如下操作，從而在該項目中實現一個參考教程中的Reac學習項目，並加深對Ice項目使用的理解：
- 創建ReactStart頁面（實際上也是React組件）
- 添加Ice項目的菜單（menu）
- 添加ReactStart頁面響應的請求路由
- 創建自定義組件
- 完成項目創建並測試
創建ReactStart頁面
根據上述項目目錄結構的說明，在/src/pages目錄下創建需要的頁面，此時這裏的頁面也是React的component。Ice中的組件需要一個目錄，然後其中創建index.jsx文件作爲該組件的定義。這裏創建的頁面爲：
src/pages/ReactStart/index.jsx
該文件的內容如下：
import React from 'react';
import { Link } from 'ice';
import StartApp from '@/components/StartApp';
/**
* react-tutorial項目內容，在該項目中使用該頁面顯示
*
* @author yitian
*/
const ReactStart = () => {
return (
<div>
<h1>React Get Start with Blog</h1>
<p>https://www.taniarascia.com/getting-started-with-react/</p>
{/*引用的組件，後續進行定義*/}
{/*<StartApp />*/}
</div>
);
};
export default ReactStart;
在menu中添加頁面的請求路徑
創建完成自己的頁面之後，先在默認項目的菜單中加入該頁面對應的請求。Ice在默認項目中具有的菜單文件爲：src/layouts/BasicLayout/menuConfig.ts。在該文件中加入如下的內容：
{
name: 'ReactStart', // react get start with blog
path: '/react-get-start',
icon: 'chart-pie',
},
這裏定義了菜單的名稱叫做：ReactStart， 菜單的請求URL爲/react-get-start。這樣就完成了菜單的配置。
在routes.ts中添加路由配置
上述過程創建了相應的頁面，也定義了菜單，下面需要將菜單中的請求URL和相應的頁面進行關聯。此時需要使用到的文件就是Ice項目中的路由配置文件：src/routes.ts。在該文件中加入如下的路由配置：
import Home from '@/pages/Home';
import About from '@/pages/About';
import ReactStart from '@/pages/ReactStart';
import TicGame from '@/components/TicGame';
/**
* 項目路由配置
*/
const routes = [
{
path: '/react-get-start', // 該部分爲添加的路由配置
component: ReactStart,
},
{
path: '/about', // 路由URL
component: About, // 響應組件About
},
{
path: '/', // 如果使用/，則需要放在最後面
component: Home,
}
];
export default routes;
對於Ice項目中的路由配置，Ice官方文檔中有詳細的說明：https://ice.work/docs/guide/basic/router。這裏需要注意的是，由於在路由配置中使用了/來響應Home頁面，而Ice的路由查找爲根據文件從上到下依次查找，並返回第一個相匹配的path。因此對於/的路由配置需要放在該文件中的最後一個，如果放到第一個的話，則所有請求的響應都會是Home頁面了。
完成以上的內容之後，就可以啓動項目來測試新建的頁面了，項目啓動命令如下：
npm start
項目啓動後會打開localhost:3333頁面，點擊左側菜單中的ReactStart就可以打開剛纔創建的ReactStart頁面了，如下：
但該頁面中引入的StartApp組件還沒有創建，因此其中顯示的只有該頁面中定義的一些文字內容。
創建自定義組件
有了上述的StartReact頁面，下面就可以使用該頁面來進行完整的React學習項目的開發工作。在Ice項目中組件需要創建在：src/components目錄下，組件的定義和上述StartReact頁面相似。都是需要創建一個目錄和其中的index.jsx文件，並且可以引入相應的css等依賴。
例如創StartReact頁面中引入的StartApp組件時，需要創建如下的目錄和文件：
src/components/StartApp/index.jsx
src/components/StartApp/index.css
其中index.jsx文件中的內容如下：
import React, {Component} from 'react';
import ReactDom from 'react-dom';
import StartTable from '../StartTable';
import './index.css';
import StartForm from "../StartForm";
class StartApp extends Component {
// 定義state
state = {
characters: [],
};
// 根據index刪除更新state中的內容
removeCharacter = index => {
const {characters} = this.state;
this.setState({
characters: characters.filter((character, i) => {
return i !== index;
})
})
};
// 提交時間處理
handleSubmit = character => {
this.setState({
characters: [...this.state.characters, character]
})
};
render() {
const {characters} = this.state;
return (
<div className="App">
{/*使用props處理表格數據顯示*/}
<StartTable
characterData={characters}
removeCharacter={this.removeCharacter}
/>
{/*使用state更新表格數據*/}
<h3>Add new character: </h3>
<StartForm handleSubmit={this.handleSubmit}/>
</div>
)
}
}
export default StartApp;
由於Ice項目中會自動將export的組件加入到React根元素中，因此在組件中僅需要在最後export出來就可以。
這裏具體的項目開發情況不在進行詳述，具體可以參考Git：https://github.com/Yitian-Zhang/my-ice-start。
完成項目創建並測試
根據上述git項目中的代碼，完成項目的整體編寫之後。即可以在剛纔進入的StartReact頁面中看到創建的React學習項目的內容，該頁面完成後如下：
總結
通過上述個過程即在Ice默認創建的項目中加入了自定義的頁面和組件，並完成了菜單的添加以及路由的設置。此時就可以在新創建的頁面中完成React學習項目的開發工作。同樣的，在學習React的過程中，對不同部分的學習內容可以通過上述的過程在新增的頁面中完成一個獨立的學習項目。此時就可以將很多個React的學習小項目整合到Ice項目中，便於後續的回顧和深入。