• 环境配置[简化版]
  • 环境搭建
    • #环境准备">#环境准备
    • #脚手架">#脚手架
    • #约定式路由">#约定式路由
    • #部署发布">#部署发布
      • #构建">#构建
      • #本地验证">#本地验证
      • #部署">#部署
    • #测试与配置检查">#测试与配置检查
      • #测试">#测试
      • #配置检查">#配置检查
    • #介绍 create-umi">#介绍 create-umi
    • #创建 umi 项目">#创建 umi 项目

    umijs.org/zh/guide/getting-started.html：环境搭建

    环境配置[简化版]

    1. # Install deps
    2. $ yarn global add umi # or npm install -g umi
    3. # Create application
    4. $ mkdir myapp && cd myapp
    5. // yarn 创建命令
    6. $ yarn create umi
    7. //选择 app 回车确认
    8. //选择 antd 和 dva 回车确认
    9. // 安装 umi-plugin-react 依赖
    10. $ npm i -S umi-plugin-react
    11. // 启动应用
    12. // npm start

    新建路由

    安装 npx

    1. npm i -S npx

    如果你没有 npx，需要先安装他，用于执行 node_modules 下的命令，

    1. $ yarn global add npx

    然后通过命令创建 /products 路由，

    1. $ npx umi g page products
    2.    create src/pages/products.js
    3.    create src/pages/products.css
    4. ✔  success
    5. $ npm start

    然后在浏览器里打开 http://localhost:8000/products，你应该能看到对应的页面

    环境搭建

    #环境准备

    首先得有 node，并确保 node 版本是 8.10 或以上。（mac 下推荐使用 nvm 来管理 node 版本）

    1. $ node -v
    2. 8.1x

    推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。 电信2s

    1. # 国内源
    2. $ npm i yarn tyarn -g
    3. # 后面文档里的 yarn 换成 tyarn
    4. $ tyarn -v
    5. # 阿里内网源
    6. $ tnpm i yarn @ali/yarn -g
    7. # 后面文档里的 yarn 换成 ayarn
    8. $ ayarn -v

    然后全局安装 umi，并确保版本是 2.0.0 或以上。 电信大概1066.97s=18分钟

    1. $ yarn global add umi
    2. $ umi -v
    3. 2.0.0

    注意：如果这步中断后执行下面，在yarn global add server 会出错误
    【错误/users/a1/.config/yarn/global/node_modules/now:命令失败。
    退出代码：2 命令：node download/install.js
    争论：目录：/users/a1/.config/yarn/global/node_modules/now
    输出：>对于源代码，请查看：https://github.com/zeit/now-cli
    错误：enent:没有这样的文件或目录，重命名’/users/a1/.config/yarn/global/node’/modules/now/download/dist/now.partial’->’/users/a1/.config/yarn/global/node’/modules/now/download/dist/now’
    在object.renamesync上（fs.js:593:3）
    下载时（/users/a1/.config/yarn/global/node_modules/now/download/dist/index.js:6129:25）
    at process._tickcallback（内部/process/next_tick.js:68:7）
    埃尔诺：- 2，syscall:’重命名’，代码：“ENONOT”，路径：
    ‘/users/a1/.config/yarn/global/node_modules/now/download/dist/now.分部’，Dest:
    ‘/users/a1/.config/yarn/global/node_modules/now/download/dist/now’】

    1. error /Users/a1/.config/yarn/global/node_modules/now: Command failed.
    2. Exit code: 2
    3. Command: node download/install.js
    4. Arguments: 
    5. Directory: /Users/a1/.config/yarn/global/node_modules/now
    6. Output:
    7. > For the source code, check out: https://github.com/zeit/now-cli
    11. { Error: ENOENT: no such file or directory, rename '/Users/a1/.config/yarn/global/node_modules/now/download/dist/now.partial' -> '/Users/a1/.config/yarn/global/node_modules/now/download/dist/now'
    12.     at Object.renameSync (fs.js:593:3)
    13.     at download (/Users/a1/.config/yarn/global/node_modules/now/download/dist/index.js:6129:25)
    14.     at process._tickCallback (internal/process/next_tick.js:68:7)
    15.   errno: -2,
    16.   syscall: 'rename',
    17.   code: 'ENOENT',
    18.   path:
    19.    '/Users/a1/.config/yarn/global/node_modules/now/download/dist/now.partial',
    20.   dest:
    21.    '/Users/a1/.config/yarn/global/node_modules/now/download/dist/now' }

    #脚手架

    先找个地方建个空目录。

    1. $ mkdir myapp && cd myapp

    然后通过umi g创建一些页面，

    1. $ umi g page index
    2. $ umi g page users

    umi g是umi generate 的别名，可用于快速生成 component、page、layout 等，并且可在插件里被扩展，比如 umi-plugin-dva 里扩展了 dva:model，然后就可以通过umi g dva:model foo 快速 dva 的 model。然后通过 tree 查看下目录，（windows 用户可跳过此步）

    1. $ tree
    2. .
    3. └── pages
    4.     ├── index.css
    5.     ├── index.js
    6.     ├── users.css
    7.     └── users.js

    这里的 pages 目录是页面所在的目录，umi 里约定默认情况下 pages 下所有的 js 文件即路由，如果有 next.js 或 nuxt.js 的使用经验，应该会有点眼熟吧。
    然后启动本地服务器，

    1. $ umi dev

    环境搭建 - 图1

    #约定式路由

    启动umi dev 后，大家会发现 pages 下多了个.umi的目录。这是啥？这是 umi 的临时目录，可以在这里做一些验证，但请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。
    然后我们在 index 和 users 直接加一些路由跳转逻辑。
    先修改page/index.js ，

    1. + import Link from 'umi/link';
    2. import styles from './index.css';
    3. export default function() {
    4.   return (
    5.     <div className={styles.normal}>
    6.       <h1>Page index</h1>
    7. +     <Link to="/users">go to /users</Link>
    8.     </div>
    9.   );
    10. }

    再修改pages/users.js ，

    1. + import router from 'umi/router';
    2. import styles from './index.css';
    3. export default function() {
    4.   return (
    5.     <div className={styles.normal}>
    6.       <h1>Page index</h1>
    7. +     <button onClick={() => { router.goBack(); }}>go back</button>
    8.     </div>
    9.   );
    10. }

    然后浏览器验证，应该已经可以在 index 和 users 两个页面之间通过路由跳转了。

    #部署发布

    #构建

    执行umi build ，9297ms=9s

    1. $ umi build
    2. DONE  Compiled successfully in 1729ms
    3. File sizes after gzip:
    4.   68.04 KB  dist/umi.js
    5.   83 B      dist/umi.css

    构建产物默认生成到./dist 下，然后通过 tree 命令查看，(windows 用户可忽略此步）

    1. $ tree ./dist
    2. ./dist
    3. ├── index.html
    4. ├── umi.css
    5. └── umi.js

    #本地验证

    发布之前，可以通过serve 做本地验证，电信大概1200.40s/ 8.10s.

    1. $ yarn global add serve
    2. $ serve ./dist
    3. Serving!
    4. - Local:            http://localhost:5000
    5. - On Your Network:  http://{Your IP}:5000
    6. Copied local address to clipboard!

    访问 http://localhost:5000，正常情况下应该是和umi dev 一致的。

    #部署

    本地验证完，就可以部署了，这里通过 now 来做演示。
    电信大概3027.40s(50分钟联通网太慢会有http://tobao.org镜像错误) 联通34.43s(执行太快有一个镜像错误).
    电信大概1403.54s(24分钟).
    660.48s(11分钟).

    1. $ yarn global add now
    2. $ now ./dist
    3. > Deploying /private/tmp/sorrycc-1KVCmK/dist under chencheng
    4. > Synced 3 files (301.93KB) [2s]
    5. > https://dist-jtckzjjatx.now.sh [in clipboard] [1s]
    6. > Deployment complete!

    然后打开相应的地址就能访问到线上的地址了。

    注意：错误
    “~/.now/auth.json”的内容无效。未在内部找到“token”属性。运行“now login”进行授权。

    1. > Error! The content of "~/.now/auth.json" is invalid. No `token` property found inside. Run `now login` to authorize.

    #测试与配置检查

    #测试

    umi 内置了基于jest 的测试工具 umi-test ：

    1. $ umi test
    2. Options:
    3.     --coverage            indicates that test coverage information should be collected and reported in the output

    #配置检查

    使用 umi inspect 列出配置项的内容用以检查：

    1. $ umi inspect
    2. Options:
    3.     --mode                specify env mode (development or production, default is development)
    4.     --rule <ruleName>     inspect a specific module rule
    5.     --plugin <pluginName> inspect a specific plugin
    6.     --rules               list all module rule names
    7.     --plugins             list all plugin names
    8.     --verbose             show full function definitions in output

    #介绍 create-umi

    umi 通过 create-umi 提供脚手架能力，包含：

    • project，通用项目脚手架，支持选择是否启用 TypeScript，以及 umi-plugin-react 包含的功能
    • ant-design-pro，仅包含 ant-design-pro 布局的脚手架，具体页面可通过 umi block 添加
    • block，区块脚手架
    • plugin，插件脚手架
    • library，依赖（组件）库脚手架，基于 umi-plugin-library

      #创建 umi 项目

      你可以通过yarn create umi / npm create umi 使用 create-umi。推荐使用yarn create命令，能确保每次使用最新的脚手架。
      首先，在新目录下使用yarn create umi，
      1. $ mkdir myapp && cd myapp
      2. $ yarn create umi

    FAQ：如果提示 create-umi 命令不存在，你需要执行yarn global bin，然后把 global bin 的路径添加到环境变量PATH中。
    选择 project，

    1. ? Select the boilerplate type (Use arrow keys)
    2.   ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
    3. ❯ app             - Create project with a simple boilerplate, support typescript.
    4.   block           - Create a umi block.
    5.   library         - Create a library with umi.
    6.   plugin          - Create a umi plugin.

    选择是否使用 TypeScript，

    1. ? Do you want to use typescript? (y/N)

    然后，选择你需要的功能，功能介绍详见 plugin/umi-plugin-react，
    选择 DVA

    1. ? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
    2. ❯◯ antd
    3.  ◯ dva
    4.  ◯ code splitting
    5.  ◯ dll

    确定后，会根据你的选择自动创建好目录和文件，

    1. create package.json
    2.    create .gitignore
    3.    create .editorconfig
    4.    create .env
    5.    create .eslintrc
    6.    create .prettierignore
    7.    create .prettierrc
    8.    create .umirc.js
    9.    create mock/.gitkeep
    10.    create src/app.js
    11.    create src/assets/yay.jpg
    12.    create src/global.css
    13.    create src/layouts/index.css
    14.    create src/layouts/index.js
    15.    create src/models/.gitkeep
    16.    create src/pages/index.css
    17.    create src/pages/index.js
    18.    create webpack.config.js
    19. ✨  File Generate Done
    20. ✨  Done in 161.20s.

    然后安装依赖，

    1. $ yarn

    最后通过yarn start启动本地开发，

    1. $ yarn start

    如果顺利，在浏览器打开 http://localhost:8000 可看到以下界面，
    image.png