[英]Webpack is importing modules from my machine's global `node_modules`. How do I get it to only import from my project's `node_modules`?
我正在将一个项目从使用 Grunt 迁移到使用 Webpack。 本项目使用 jQuery。 我注意到捆绑的代码运行良好,即使我还没有将 jQuery 添加到package.json
,这看起来很奇怪。
查看 webpack webpack --mode=development --display-modules
的 output ,我看到:
[../../../../../../../node_modules/jquery/dist/jquery.js] /Users/rothomas/node_modules/jquery/dist/jquery.js 274 KiB {index} [built]
那就是:似乎在某些时候我运行了npm install --global jquery
,并且 Webpack 正在导入 ZF593E1439188E478349D52476506C22EZ 我不希望这种情况发生,因为我的队友/服务器不会在$HOME
中安装 jQuery 。
The obvious solution is for me to just remove jQuery from my $HOME/node_modules
(no idea how it got there anyway), which will cause Webpack to fail until I add it to package.json
, as expected.
但我想知道:
为什么Webpack 使用$HOME/node_modules
? 我知道这是 Node package 解析器的默认行为,但它似乎很容易出错,因为我想许多其他开发人员将他们的项目嵌套在$HOME
下。
如何指定 Webpack 应该尝试解析模块的 scope?
(我查看了 Webpack关于 resolvers 的文档,但对我来说不是很清楚。)
这是我当前的 Webpack 配置:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function pathTo(filepath) {
return path.join(__dirname, filepath);
}
module.exports = function (env, argv) {
return {
entry: {
'index': [
pathTo('src/scripts/index.js'),
pathTo('src/scss/index.scss'),
]
},
module: {
rules: [
{
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
'@babel/env'
]
},
test: /\.js$/,
},
{
test: /\.(scss|css|sass)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
url: false,
},
},
{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: 'expanded',
},
},
},
],
},
],
},
output: {
filename: '[name].js',
path: pathTo('web'),
},
plugins: [
new MiniCssExtractPlugin()
],
}
}
问题是您的应用程序位于具有全局node_modules
目录的目录中。
Webpack(以及所有节点解析器)将继续搜索您的树,直到找到具有节点模块目录的目录。 然后它将在那里检查 jquery。 它会继续这样做,直到找到它正在寻找的东西,或者它到达文件系统的根目录。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.