从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"
  },

我使用NICE样板命令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"的模块，有助于扩展weach react应用程序随附的webpack配置而无需弹出。您可能如何添加RESOLVE部分的一个示例，看起来像

$ 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配置。

Answer 2

@gbozee的答案对我有用，而rewireJquery函数的更改

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

function rewireJquery(config, env) {
  config.resolve = config.resolve || {};
  config.resolve.alias = config.resolve.alias || {};
  config.resolve.alias.jquery = path.join(__dirname, "./stubs/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;
};

您还需要删除env === "production"条件才能在本地工作。

请注意，整个荣誉转到 @gbozee的答案。