从 create-react-app 项目中排除 Webpack 的依赖

Question

我的项目有以下依赖项。

"dependencies": {
    "amazon-cognito-identity-js": "^1.28.0",
    "bootstrap": "^3.3.7",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17"
  },

我使用漂亮的样板命令创建了我的项目，create-react-app my-app.

我现在遇到了一个问题，我需要告诉 WebPack（我发现 React 使用它）排除 jQuery 的依赖，这样我才能让React Slider工作。

问题是 webpack 配置是节点模块的一部分。如果我修改那里的任何内容，它不会反映任何下载我的项目的用户。应该有一种方法可以覆盖默认的 webpack 设置，但我不知道该怎么做？

我发现这个项目可能会做我需要但不确定的事情。

说明说我需要将它添加到 webpack 配置中。

resolve: {
    alias: {
         "jquery": path.join(__dirname, "./jquery-stub.js");
    }
}

鉴于我无法直接访问 Webpack，我该怎么做？

Answer 1

有一个名为react-app- rewired的模块，它有助于扩展 create react app 附带的 webpack 配置而无需弹出。如何添加解析部分的示例如下所示

$ npm install --save-dev react-app-rewired

您需要在与您的目录相同的目录中创建一个文件 package.json

/* config-overrides.js */
let path = require('path')


function rewireJquery(config, env) {
  config.resolve = {
    alias: {
         "jquery": path.join(__dirname, "./jquery-stub.js");
    }
  };
  return config;
}
module.exports = function override(config, env) {
  //do stuff with the webpack config...
  // config = rewirePreact(config, env);
  if (env === "production") {
    config = rewireJquery(config, env);
  }
  return config;
};

您需要安装该模块react-app-rewired并将您的配置package.json包含以下内容

 /* package.json */

  "scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom"
}

有了上面的，你可以在webpack不弹出的情况下扩展配置。