dva 升级 2.0 版本遇到问题小结
2017-10-13 00:00
489 查看
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" } } },
相关文章推荐
- 在使用低版本的element-ui升级到element-ui 2.0的时候遇到的问题
- MySQL版本升级遇到的问题小结
- 自动发布工具版本从python2升级成python3后遇到的种种问题(涉及paramiko,Crypto,zipfile等等)
- 升级Android支持库版本遇到的两个问题
- Android版本更新时对SQLite数据库升级或者降级遇到的问题
- 2016 cocoapods的安装和使用以及版本升级遇到的问题
- 自动发布工具版本从python2升级成python3后遇到的种种问题(涉及paramiko,Crypto,zipfile等等)
- Phoenix的安装、升级版本、以及使用,以及所遇到的问题
- 升级Android支持库版本遇到的两个问题
- struts升级到最高版本后遇到的问题。关于actionmessage传递问题。
- 升级CentOS 5.3遇到Python版本不匹配问题?
- 2016 cocoapods的安装和使用以及版本升级遇到的问题
- Android版本更新时对SQLite数据库升级或者降级遇到的问题
- App版本更新时对SQLite数据库升级或者降级遇到的问题
- Asp.net1.1升级到2.0遇到的一些问题总结
- App版本更新时对SQLite数据库升级或者降级遇到的问题
- 升级Android支持库版本遇到的两个问题
- node升级版本遇到的问题
- 2016 cocoapods的安装和使用以及版本升级遇到的问题
- Android版本更新时对SQLite数据库升级或者降级遇到的问题