UmiJS 目錄及約定

在文件和目錄的組織上，umi 更傾向於選擇約定的方式。

一個復雜應用的目錄結構如下：

.
├── dist/                          // 默認的 build 輸出目錄
├── mock/                          // mock 文件所在目錄，基於 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二選一
└── src/                           // 源碼目錄，可選
    ├── layouts/index.js           // 全局布局
    ├── pages/                     // 頁面目錄，里面的文件即路由
        ├── .umi/                  // dev 臨時目錄，需添加到 .gitignore
        ├── .umi-production/       // build 臨時目錄，會自動刪除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 頁面
        ├── page1.js               // 頁面 1，任意命名，導出 react 組件
        ├── page1.test.js          // 用例文件，umi test 會匹配所有 .test.js 和 .e2e.js 結尾的文件
        └── page2.js               // 頁面 2，任意命名
    ├── global.css                 // 約定的全局樣式文件，自動引入，也可以用 global.less
    ├── global.js                  // 可以在這里加入 polyfill
    ├── app.js                     // 運行時配置文件
├── .umirc.js                      // umi 配置，同 config/config.js，二選一
├── .env                           // 環境變量
└── package.json

#ES6 語法

配置文件、mock 文件等都有通過 @babel/register 注冊實時編譯，所以可以和 src 里的文件一樣，使用 ES6 的語法和 es modules 。

#dist

默認輸出路徑，可通過配置 outputPath 修改。

#mock

此目錄下所有的 .js 文件（包括 _ 前綴的）都會被解析為 mock 文件。

比如，新建 mock/users.js，內容如下：

export default { '/api/users': ['a', 'b'], }; 

然后在瀏覽器里訪問 http://localhost:8000/api/users 就可以看到 ['a', 'b'] 了。

如果想忽略 mock 文件夾下的部分文件，參考 mock.exclude 配置。

#src

約定 src 為源碼目錄，如果不存在 src 目錄，則當前目錄會被作為源碼目錄。

比如：下面兩種目錄結構的效果是一致的。

+ src
  + pages
    - index.js
  + layouts
    - index.js
- .umirc.js

+ pages
  - index.js
+ layouts
  - index.js
- .umirc.js

#src/layouts/index.js

注：配置式路由下無效。

全局布局，在路由外面套的一層路由。

比如，你的路由是：

[
  { path: '/', component: './pages/index' },
  { path: '/users', component: './pages/users' },
]

如果有 layouts/index.js，那么路由就會變為：

[
  { path: '/', component: './layouts/index', routes: [
    { path: '/', component: './pages/index' },
    { path: '/users', component: './pages/users' },
  ] }
]

#src/pages

注：配置式路由下無效。

約定 pages 下所有的 js、jsx、ts 和 tsx 文件即路由。關於更多關於約定式路由的介紹，請前往路由章節。

#src/pages/404.js

404 頁面。注意開發模式下有內置 umi 提供的 404 提示頁面，所以只有顯式訪問 /404 才能訪問到這個頁面。

#src/pages/document.ejs

有這個文件時，會覆蓋默認的 HTML 模板。

模板里需至少包含根節點的 HTML 信息，

<div id="root"></div> 

#src/pages/.umi

這是 umi dev 時生產的臨時目錄，默認包含 umi.js 和 router.js，有些插件也會在這里生成一些其他臨時文件。可以在這里做一些驗證，但請不要直接在這里修改代碼，umi 重啟或者 pages 下的文件修改都會重新生成這個文件夾下的文件。

#src/pages/.umi-production

同 src/pages/.umi，但是是在 umi build 時生成的，umi build 執行完自動刪除。

#.test.(js|ts) 和 .e2e.(js|ts)

測試文件，umi test 會查找所有的 .test.js 和 .e2e.js 文件來跑測試。

#src/global.(js|ts)

此文件會在入口文件的最前面被自動引入，可以在這里加載補丁，做一些初始化的操作等。

#src/global.(css|less|sass|scss)

此文件不走 css modules，且會自動被引入，可以在這里寫全局樣式，以及做樣式覆蓋。

#src/app.(js|ts)

運行時配置文件，可以在這里擴展運行時的能力，比如修改路由、修改 render 方法等。

#.umirc.(js|ts) 和 config/config.(js|ts)

編譯時配置文件，二選一，不可共存。

#.env

環境變量配置文件，比如：

CLEAR_CONSOLE=none
BROWSER=none

這里定義的系統環境變量在整個umi-build-dev的生命周期里都可以被使用

#.env.local

本地化的系統環境變量，該文件通常不用提交到代碼倉庫。本地啟動時， 相同內容 .env.local 會覆蓋 .env 。