从react-create-app迁移到通常的react应用程序

时间:2018-08-23 15:24:35

标签: reactjs react-create-app

最近,我开始从事一个商业项目,该项目是由另一个基于react-create-app的程序员编写的。由于该项目已经足够大并且不会停止开发,因此使用React-create-app变得越来越不便,因为我希望能够完全配置自己的webpack,node.js和其他软件包。

我正在寻找机会,尽快将项目从react-create-app迁移到表单,就像项目最初是在没有它的情况下编写的。

npm run eject之后使用代码对我来说似乎很复杂。

我正在尝试查找有关此问题的至少一些说明或指南,但尚未找到。

这是package.json依赖项:

{
    "dependencies": {
    "classnames": "^2.2.5",
    "google-maps-react": "^2.0.2",
    "history": "^4.7.2",
    "husky": "^0.14.3",
    "lint-staged": "^7.2.0",
    "lodash.debounce": "^4.0.8",
    "lodash.isequal": "^4.5.0",
    "lodash.throttle": "^4.1.1",
    "moment-timezone": "^0.5.17",
    "prettier": "^1.12.1",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-collapse": "^4.0.3",
    "react-copy-to-clipboard": "^5.0.1",
    "react-dom": "^16.3.2",
    "react-facebook-login": "^3.7.2",
    "react-google-login": "^2.11.3",
    "react-input-mask": "^1.2.2",
    "react-motion": "^0.5.2",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "1.1.4",
    "react-scrollchor": "^4.2.1",
    "react-slick": "^0.14.11",
    "react-stripe-elements": "^1.6.0",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "validator": "^8.2.0"
  },

  "devDependencies": {
    "eslint": "^5.3.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.10.0",
    "react-scrolllock": "^3.0.1",
    "redux-devtools-extension": "^2.13.5",
    "reselect": "^3.0.1",
    "stylelint": "^9.4.0",
    "stylelint-config-standard": "^18.2.0"
  }
}

1 个答案:

答案 0 :(得分:0)

我会说这取决于您想做什么。我有同样的问题。我弹出本地副本后发现很多问题。我的解决方案是利用现有的CRA项目广告执行以下操作:

  1. 更新到最新的react和react-dom,运行'yarn react @ next react-dom @ next'
  2. 您现在应该拥有最新的React版本-这样您就可以使用React.lazy / React.Suspense进行代码拆分,使用挂钩等。
  3. 如果在使用导入语法时遇到问题,则需要使用babel-plugin-syntax-dynamic-import插件。将“ babel”字段放入包json中。

我希望能有所帮助。也有类似https://github.com/timarney/react-app-rewired的库,但我没有使用它们。