dva 升级 2.0 版本遇到问题小结

2019独角兽企业重金招聘Python工程师标准>>>

1. 使用 browserHistory

dva 默认使用 hashHistory，如果想使用 browserHistory，怎么办？

安装 history 包，使用 npm@5.3.0 安装时会报错，原因是依赖包安装问题，可以使用 yarn 安装。

在 index.js 中引入 history 包：

import { createBrowserHistory as createHistory } from 'history'

在 dva() 中配置 history 属性：

const app = dva({ history: createHistory() })

【Bug】dva/router 中的 browserHistory 测试并不是浏览器history，而是 hashHistory。 ———— 提 Issue

2. 在 router.js 中配置动态加载。

import dynamic from 'dva/dynamic';
const UserPageComponent = dynamic({
  app,
  models: () => [import('./models/users'),],
  component: () => import('./routes/UserPage'),
});

注：app.router() 方法中参数为 (history, app)

3. 处理全局错误

import { message } from 'antd';
const app = dva({
  onError (error) {
    message.error(error.message);
  },
});

4. 设置别名

通过工具包将相对路径写成绝对路径。并且还要处理 eslint 的校验。

安装 babel-plugin-module-resolver 包

npm install babel-plugin-module-resolver --save-dev

在 .roadhog 文件中配置别名

"extraBabelPlugins": [
    ["module-resolver", {
      "alias": {
        "routes": `${__dirname}/src/routes`,
        "models": `${__dirname}/src/models`,
        "services": `${__dirname}/src/services`,
        "utils": `${__dirname}/src/assets/utils`
      }
    }]
],

如果 eslint 不能通过，在 .eslintrc 文件中添加规则

"rules": {
    "import/no-unresolved": 0,
}

实践中发现：只有写在文件顶部的 import 中的路径可以使用路径别名。在 js 方法里的 import 无法使用别名。

5. 使用 dll 加速启动

• 默认关闭

• 通过 .roadhogrc 的 dllPlugin 配置开启，可以配 exclude 和 include 的包

  dllPlugin: {
      exclude: ["babel-runtime", "roadhog", "cross-env"],
      include: ["dva/router", "dva/saga", "dva/fetch"]
  }
  

• 提供 roadhog buildDll 命令手动打 dll bundle

• 开启 dllPlugin 后，roadhog server 时检到没有 manifest.json，提醒执行 roadhog buildDll

  D:\code\dva\dva-demo>npm run dev
  
  > @ dev D:\code\dva\dva-demo
  > cross-env BROWSER=none HOST=0.0.0.0 roadhog server
  
  Failed to parse .roadhogrc config.
  
  Error in .roadhogrc
  Syntax error: Unexpected token 'd' , (12:3)
  
    dllPlugin: {
  

  在 .roadhogrc 中使用 dllPlugin 属性会报错，可以重命名为 .roadhogrc.js 文件，使用 export default 导出对象就不会报错了。

  在 package.json 中给 script 对象添加一条属性

  "scripts": {
      "build:dll": "roadhog buildDll"
  },
  

• 然后用户还需手动在调试的 html 里引入 roadhog.dll.js（后面可以考虑用 HtmlWebpackPlugin 生成）

  实际测试，roadhog@1.2 不需要手动引入 roadhog.dll.js，在运行 npm run dev 时会自动下载。

注：road-dlls 还没有发布成 npm 包，无法通过 npm 进行下载。

能正常启动，但是浏览器中页面报错：roadhog is not define.

6. 使用 cross-env 启动

package.json 文件中进行配置，使用 cross-env，在 linux/windows/mac 系统都可以运行 roadhog server。

"scripts": {
    "dev": "cross-env BROWSER=none HOST=0.0.0.0 roadhog server"
},

7. 配置代理

在 .roadhogrc.js 中添加配置属性

"proxy": {
    "/api/v1": {
        "target": "http://localhost:8080/api",
        "changeOrigin": true,
        "pathRewrite": { "^/api/v1" : "/v1" }
    }
},

转载于:https://my.oschina.net/dkvirus/blog/1550538