[英]Exclude Dependency from Webpack from create-react-app project
I have the following dependencies for my project.我的项目有以下依赖项。
"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"
},
I created my project using the nice boilerplate command, create-react-app my-app
.我使用漂亮的样板命令
create-react-app my-app
创建了我的项目。
I'm now having an issue where I need to tell WebPack (which I found out React uses) to exclude the dependency of jQuery so I can get React Slider working.我现在遇到一个问题,我需要告诉 WebPack(我发现 React 使用它)排除 jQuery 的依赖关系,这样我才能让React Slider工作。
Problem is the webpack config is part of the node modules.问题是 webpack 配置是节点模块的一部分。 If I modify anything in there it won't reflect for any users downloading my project.
如果我修改其中的任何内容,它不会反映任何下载我的项目的用户。 There should be a way to override the default webpack settings but I'm not sure how to do this?
应该有一种方法可以覆盖默认的 webpack 设置,但我不知道该怎么做?
I found this project which might do what I need but not sure.我发现这个项目可能会做我需要但不确定的事情。
The instructions say I need to add this to the webpack config.说明说我需要将其添加到 webpack 配置中。
resolve: {
alias: {
"jquery": path.join(__dirname, "./jquery-stub.js");
}
}
How do I do this given I don't have access to Webpack directly?鉴于我无法直接访问 Webpack,我该怎么做?
There is a module called react-app-rewired<\/a> that helps to extend the webpack config that comes with create react app without ejecting.有一个名为
react-app-<\/a> rewired 的模块,它有助于扩展 create react app 附带的 webpack 配置,而不会弹出。 An example of how you might add the resolve section looks like this
如何添加解析部分的示例如下所示
$ npm install --save-dev react-app-rewired<\/code>
/* 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;
};
@gbozee's answer worked for me with a small change in the rewireJquery
function @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;
};
You also need to remove the env === "production"
condition for this to work on local.您还需要删除
env === "production"
条件才能在本地工作。
Please note, entire credit goes to @gbozee's answer .请注意,全部归功于@gbozee 的回答。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.