gpt4 book ai didi

javascript - Webpack 正在从我机器的全局 `node_modules` 导入模块。如何让它只从我项目的 `node_modules` 导入?

转载 作者:行者123 更新时间:2023-11-30 19:07:28 27 4
gpt4 key购买 nike

我正在将一个项目从使用 Grunt 迁移到使用 Webpack。这个项目使用 jQuery。我注意到捆绑代码工作正常,即使我还没有将 jQuery 添加到 package.json,这看起来很奇怪。

查看 webpack --mode=development --display-modules 的输出,我看到:

[../../../../../../../node_modules/jquery/dist/jquery.js] /Users/rothomas/node_modules/jquery/dist/jquery.js 274 KiB {index} [built]

也就是说:似乎在某个时候我运行了 npm install --global jquery,Webpack 正在导入那个 jQuery。我不希望发生这种情况,因为我的队友/服务器不会在 $HOME 中安装 jQuery。

对我来说,最明显的解决方案是从我的 $HOME/node_modules 中删除 jQuery(不知道它是如何到达那里的),这将导致 Webpack 失败,直到我将它添加到 package.json,符合预期。

但我想知道:

  1. 为什么Webpack 使用$HOME/node_modules?我知道这是 Node 包解析器的默认行为,但它似乎很容易出错,因为我想很多其他开发人员将他们的项目嵌套在 $HOME 下。

  2. 如何指定 Webpack 尝试解析模块的范围?

(看了Webpack的documentation on 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。它会继续执行此操作,直到找到它要查找的内容,或者到达文件系统的根目录。

关于javascript - Webpack 正在从我机器的全局 `node_modules` 导入模块。如何让它只从我项目的 `node_modules` 导入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58842595/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com