前言
ICE是阿里巴巴開發和開源的一款簡單而友好的前端研發體系，具有如下的特性：
- 可視化開發：通過 IDE 簡化前端工程複雜度，同時通過適配器可接入不同的項目工程進行可視化管理，定製專屬的前端工作臺
- 豐富的物料：基於物料拼裝提高項目開發效率，同時提供豐富的 React/Vue 物料
- 最佳實踐：結合豐富的經驗沉澱出的項目開發最佳實踐，包括目錄結構、開發調試、路由配置、狀態管理等
- 自定義物料：通過物料開發者工具快速開發構建私有物料體系
這裏爲了使用多頁面的React並熟悉公司的開發環境，選擇使用了ICE項目。下面是ICE項目環境的搭建過程。
ICE官網：https://ice.work/
iceworks可視化IDE項目創建
項目創建
ice提供了兩種項目的創建方式，一種是使用iceworks前端項目開發IDE來進行可視化的項目創建，比較簡單方便。首先在官方網站（https://ice.work/）下載相應環境下的安裝文件。下面以mac環境進行。
1. 選項項目模板，左邊的模板是創建微前端項目使用的，這裏選擇第二個項目模板，創建應用項目。
2. 然後根據提示，填寫項目名稱和安裝的目錄。
3. 待上述過程完成後，變可以看到項目創建成功的提示。
4. 點擊上述進入工作臺，然後就可以打開該工具中自帶的IDE開發環境，可以方便的在其中編輯代碼。
項目啓動
在上述項目創建完成後，可以上述工作臺的“終端”使用命令啓動項目：
npm start
此時可能會出現如下異常：
ERR! CONFIG Fail to load plugin /Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/build-plugin-fusion/lib/index.js
ERR! CONFIG Error: Missing binding /Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/node-sass/vendor/darwin-x64-72/binding.node
ERR! CONFIG Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 12.x
ERR! CONFIG
ERR! CONFIG Found bindings for the following environments:
ERR! CONFIG - OS X 64-bit with Node.js 12.x
ERR! CONFIG
ERR! CONFIG This usually happens because your environment has changed since running `npm install`.
ERR! CONFIG Run `npm rebuild node-sass` to download the binding for your current environment.
ERR! CONFIG at module.exports (/Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/node-sass/lib/binding.js:15:13)
ERR! CONFIG at Object.<anonymous> (/Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/node-sass/lib/index.js:14:35)
ERR! CONFIG at Module._compile (internal/modules/cjs/loader.js:936:30)
ERR! CONFIG at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
ERR! CONFIG at Module.load (internal/modules/cjs/loader.js:790:32)
ERR! CONFIG at Function.Module._load (internal/modules/cjs/loader.js:703:12)
ERR! CONFIG at Module.require (internal/modules/cjs/loader.js:830:19)
ERR! CONFIG at require (internal/modules/cjs/helpers.js:68:18)
ERR! CONFIG at Object.<anonymous> (/Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/build-plugin-fusion/lib/webpackPlugins/appendStyleWebpackPlugin.js:7:14)
ERR! CONFIG at Module._compile (internal/modules/cjs/loader.js:936:30)
ERR! CONFIG at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
ERR! CONFIG at Module.load (internal/modules/cjs/loader.js:790:32)
ERR! CONFIG at Function.Module._load (internal/modules/cjs/loader.js:703:12)
ERR! CONFIG at Module.require (internal/modules/cjs/loader.js:830:19)
ERR! CONFIG at require (internal/modules/cjs/helpers.js:68:18)
ERR! CONFIG at Object.<anonymous> (/Users/yitian/Documents/IDEAWorkspaces/IceWorkspaces/my-ice-start/node_modules/build-plugin-fusion/lib/index.js:5:34)
根據提示運行如下命令即可解決該問題：
npm rebuild node-sass
重新運行npm start命令，項目啓動成功：
此外，除了使用命令啓動 項目外，也可以在工作臺上面，通過啓動按鈕，來啓動項目：
和使用命令時啓動項目相同，成功啓動項目後會在瀏覽器中打開相應的頁面。
提示：建議第一次使用npm start命令來啓動項目，因爲在啓動異常的時候可以查看詳細的日誌信息，方便解決問題。
初始化項目倉庫
如果需要將所創建的項目提交至git，iceworks也提供了比較方便的使用方式。在工作臺左側選擇源代碼管理選項，可以看到如下的初始化項目倉庫的按鈕：
初始化的時候需要選擇下面項目所在的目錄，其實就是git init命令 ：
然後在下面的框中填寫commit的message，對號爲commit：
然後在git中創建名爲my-ice-start的遠程倉庫，然後根據倉庫創建完成後給出的提示（提示如下）：
將已有的提交試用如下命令進行push：
bash-3.2$ git remote add origin https://github.com/Yitian-Zhang/my-ice-start.git
bash-3.2$ git push -u origin master
這樣就將此時創建的項目提交到了遠程倉庫中：
命令行項目創建
除了上述使用iceworks進行項目的創建，ice還提供了命令行的方式創建項目。
初始化項目
可以選擇使用 npm 或者 yarn 工具進行項目初始化，如下輸入項目名即可：
$ npm init ice <projectName>
# or
$ yarn create ice <projectName>
選擇模板
可以根據實際情況選擇 TypeScript 和 JavaScript 模板，其中各包含一個輕量的 Lite 和功能完善的 Pro 模板：
? Please select a template (Use arrow keys)
❯ A lightweight TypeScript template.
A lightweight JavaScript template.
Pro TypeScript template，Integrated rich features such as charts, lists, forms, etc.
Pro JavaScript template，Integrated rich features such as charts, lists, forms, etc
選擇模板會自動創建項目，看到如下信息說明項目創建成功：
✔ download npm tarball successfully.
info clean package.json...
Initialize project successfully.
Starts the development server.
cd <projectName>
npm install
npm start
✨ Done
啓動項目
按照上面的提示，進入新建的項目安裝依賴即可：
$ cd <projectName>
# 安裝依賴
$ npm install
# 啓動項目
$ npm start
執行上述命令後，會自動打開瀏覽器窗口訪問 http://localhost:3333，這時應該看到默認的頁面。
IDEA導入項目進行開發
除了試用上述ice提供的iceworks開發工作臺進行項目開發和運行，上述創建的ice項目也可以導入到IDEA中進行開發。下面爲相應的導入過程：
這裏不用選model：
試用默認的名稱就可以：
導入完成後得到如下的界面：
此時如果需要啓動該項目，比較簡單的方式就是在terminal中運行和上述一樣的如下命令：
npm start
即可以啓動項目，啓動完成後會自動在瀏覽器中打開相應的頁面。然後就可以在IDEA中進行後續的開發工作。