使用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，没有安装任何东西，浏览器运行正常。我的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": {
  ...
  }
}

这解决了我的问题。请让我知道它是否也适用于你。