FAQ

TIP

持续补充中。

General

是否可用于生产环境?

当然!umi 是公司内(蚂蚁金服)的前端基础框架,已有大量基于 umi 开发的无线和 PC 项目上线。

如何引入 polyfill ?

先安装依赖,

$ npm install @babel/polyfill --save

新建 src/global.js,内容如下:

import '@babel/polyfill';

如何动态修改 title ?

可以通过 react-helmet 动态修改 title 。

如何让编辑器的 eslint 校验生效?

编辑器需要读取 .eslint 和依赖的 eslint bin,所以需要安装相关依赖到项目。

先安装依赖,

$ npm i eslint@4 eslint-config-umi eslint-plugin-flowtype@2 eslint-plugin-import@2 eslint-plugin-jsx-a11y@5 eslint-plugin-react@7 --save-dev

然后新增 .eslintrc,内容如下:

{
  "extends": "eslint-config-umi"
}

如何禁用 dev 和 build 时的 eslint 校验?

$ ESLINT=none umi dev
$ ESLINT=none umi build

报错

this.setDynamic is not a function

不要自己配置 babel-plugin-transform-runtime,因为 umi 已内置处理,transform-runtime 处理两边会出现上述问题。

CSS

如何禁用 css modules ?

修改 .webpackrc:

{
 "disableCSSModules": true
}

如何使用 sass ?

先安装额外的依赖,

$ npm i node-sass sass-loader --save

然后修改 .webpackrc:

{
 "sass": {}
}

Test

如何断点调试

确保 node 在 8 以上,然后执行:

$ node --inspect-brk ./node_modules/.bin/umi test

然后在浏览器里打开 chrome://inspect/#devices 进行 inspect 和断点。

部署

build 后访问路由刷新后 404?

几个方案供选择:

  • 改用 hashHistory,在 .umirc.js 里配 hashHistory: true
  • 静态化,在 .umirc.js 里配 exportStatic: true
  • 服务端配置路由 fallback 到 index.html
Last Updated: 6/20/2018, 6:26:58 PM