使用 browserify 捆绑 js 代码时找不到预设 @babel/react

Question

在我目前工作的项目中，我们使用 browserify。 我已经在我的控制台中完成了npm i 。 然后当我想用命令生成js时

browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js 

它抛出一个错误

preset not found @babel/react 

像每个开发人员一样，我上网搜索了@babel/react ，但什么也没找到。 我已经看到了@babel/preset-react变化，并尝试使用它们，但它并没有解决我的问题。

那时，我的 package.json 像这样锁定：

{
  ...
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react",
            "stage-1"
          ],
          "plugins": [
            "transform-object-rest-spread"
          ]
        }
      ]
    ]
  },
  "babel": {
    "presets": [
      "react",
      "es2015",
      "stage-1"
    ]
  },
  "scripts": {
    "build-js": "browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js",
    "buildSignUp": "npm run build-js",
    ...
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@ungap/url-search-params": "^0.1.2",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "braintree-web": "^3.17.0",
    "form-serialize": "^0.7.1",
    "jest-junit": "^6.3.0",
    "nock": "^10.0.6",
    "object-assign": "^4.1.1",
    "react": "^15.4.2",
    "react-accessible-dropdown": "^1.0.2",
    "react-animate-height": "^0.10.8",
    "react-dom": "^15.4.2",
    "react-dropdown": "^1.2.0",
    "react-modal": "^3.8.1",
    "react-redux": "^5.0.6",
    "react-responsive-modal": "^1.9.4",
    "react-scroll": "^1.4.7",
    "react-select": "^2.1.2",
    "react-slick": "^0.24.0",
    "react-swipeable": "^5.4.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "slick-carousel": "^1.8.1",
    "validator": "^6.2.1"
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-jest": "^23.6.0",
    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
    "babel-plugin-transform-es3-property-literals": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "^6.22.0",
    "babel-preset-stage-1": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^13.3.0",
    "core-js": "^2.5.3",
    "envify": "^4.1.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-15": "^1.2.0",
    "jest": "^23.6.0",
    "react-test-renderer": "^15.6.2",
    "redux-logger": "^3.0.6",
    "redux-mock-store": "^1.5.3",
    "redux-test-utils": "^0.3.0",
    "uglify-js": "^3.3.9",
    "uglifyify": "^4.0.5"
  },
  "-vs-binding": {
    "ProjectOpened": [
      "build"
    ]
  },
  "jest": {
    "setupFiles": [
      "<rootDir>/test-setup.js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "testMatch": [
      "**/tests/*.js?(x)"
    ],
    "reporters": [
      "default",
      "jest-junit"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/obj/"
    ],
    "coveragePathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/obj/"
    ]
  }
}

为了解决这个问题要安装什么或改变什么？

Answer 1

在我的情况下，解决方案是扩展 package.json 的预设因为节点模块从一个版本扩展和演变到另一个版本，所以在很多情况下它们不兼容。

我已经删除了我的 node_module。 再次运行npm i 。 在我的 package.json 中添加了babel-preset-react ，无需安装任何东西，browserify 工作正常。 我的 package.json 像这样锁定。

{
  "main": "App.jsx",
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react",
            "babel-preset-react",
            "stage-1"
          ],
          "plugins": [
            "transform-object-rest-spread"
          ]
        }
      ]
    ]
  },
  "babel": {
    "presets": [
      "react",
      "es2015",
      "babel-preset-react",
      "stage-1"
    ]
  },
  "scripts": {
  ...
  }
}

这解决了我的问题。 请让我知道它是否也适合您。