说下修改原因,roadhog不支持flow,我习惯性使用flow做静态类型检查。以后尝试这ts看看好不好用。。。。(静态类型检查很重要,如果你不想让自己最后代码不清晰,就使用flow或ts吧)
这是dva new之后的package.json
{
"private": true,
"scripts": {
"start": "roadhog server",
"build": "roadhog build",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint",
"flow": "flow"
},
"dependencies": {
"antd": "^3.16.5",
"babel-plugin-import": "^1.11.0",
"dva": "^2.4.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
},
"devDependencies": {
"babel-plugin-dva-hmr": "^0.3.2",
"eslint": "^4.14.0",
"eslint-config-umi": "^0.1.1",
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"flow-bin": "^0.97.0",
"husky": "^0.12.0",
"redbox-react": "^1.4.3",
"roadhog": "^2.5.0-beta.4"
}
}
npx create-react-app my-app之后项目的package.json如下.
当然我这边加了自己的一些依赖,忽略bootstrap和antd两个重复的ui
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.16.5",
"bootstrap": "^4.3.1",
"flow-bin": "^0.95.1",
"jquery": "^3.3.1",
"react": "^16.8.4",
"react-bootstrap": "^1.0.0-beta.6",
"react-dom": "^16.8.4",
"react-scripts": "2.1.8"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"flow": "flow"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"flow-bin": "^0.95.1"
}
}
这是我修改后,package.json的样子
{
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint",
"flow": "flow"
},
"dependencies": {
"@babel/core": "^7.4.3",
"antd": "^3.16.5",
"babel-loader": "^8.0.5",
"babel-plugin-import": "^1.11.0",
"dva": "^2.4.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "^3.0.0"
},
"devDependencies": {
"babel-plugin-dva-hmr": "^0.3.2",
"flow-bin": "^0.97.0"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
几个月前的文章本来想完善发布的,结果回家就忘。。。哈哈哈。。。
嗯。。。如有问题,后续再更。我记得是不完善的