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设置，但我不知道该怎么做？

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

说明说我需要将其添加到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配置。

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

1 个答案: