从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 配置是 node 模块的一部分。如果我在其中修改任何内容，它不会反映给下载我的项目的任何用户。应该有一种方法可以覆盖默认的 webpack 设置，但我不确定如何做到这一点？

我找到了这个项目，它可能可以满足我的需求，但不确定。

说明说我需要将以下内容添加到 webpack 配置中。

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

如果我没有直接访问Webpack，我该如何做到这一点？

- Joseph Astrahan

---

看一下这个链接（https://www.codeproject.com/Articles/1183773/Create-React-App-Customize-Webpack-Config-Without），或许会有所帮助！ - RonyLoud

你很有趣，走上了正确的轨道。我可能需要先研究一下它自带的“eject”功能。 - Joseph Astrahan

看起来 eject 是我所需的，尽管必须要弹出有点烦人。 - Joseph Astrahan

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

- gbozee

---

这非常有用 :). 我一定会试试看。 - Joseph Astrahan

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's answer。

- praty