安装包后Webpack无法编译错误

Posted 2023-03-11

【中文标题】安装包后Webpack无法编译错误

【英文标题】：Webpack failed to compile error after installing a package

【发布时间】：2018-02-28 07:10:59

【问题描述】：

我正在为 Angular 4 使用一些样板代码，但遇到了问题。在我从 npm 下载另一个包之前，它工作正常。我收到以下错误，并且命令 ng serve 不再起作用。该项目已经安装了 jquery，所以这个错误对我来说没有意义。没有 webpack.config.js 文件，所以我用下面的代码添加了一个。任何帮助将不胜感激。

webpack.config.js 文件

var webpack = require('webpack');

var config = 
    plugins: [
        new webpack.ProvidePlugin(
            $: "jquery",
            jQuery: "jquery"
        )
    ]
;
module.exports = config;

错误

./~/jsdom/lib/jsdom/utils.js 中的警告 216:21-40 严重依赖： 依赖的请求是一个表达式

./~/jsdom/lib/jsdom/living/xmlhttprequest.js 中的警告 20:23-30 关键依赖：require 函数的使用方式 无法静态提取依赖项

./~/ajv/lib/async.js 96:20-33 中的警告 关键依赖项： 依赖的请求是一个表达式

./~/ajv/lib/async.js 中的警告 119:15-28 关键依赖项： 依赖的请求是一个表达式

./~/ajv/lib/compile/index.js 中的警告 13:21-34 关键依赖项： 依赖的请求是一个表达式

./~/jquery/lib/node-jquery.js 中的错误模块未找到：错误：不能 解决 'xmlhttprequest' 在 'E:\WebstormProjects\innovation-node-server-2.0\node_modules\jquery\lib' @ ./~/jquery/lib/node-jquery.js 8:28-53 @ ./src/lib.ts @ ./src/main.ts@multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

./~/jquery/lib/node-jquery.js 中的错误模块未找到：错误：不能 解决“位置”在 'E:\WebstormProjects\innovation-node-server-2.0\node_modules\jquery\lib' @ ./~/jquery/lib/node-jquery.js 13:24-43 @ ./src/lib.ts @ ./src/main.ts@multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

./~/jquery/lib/node-jquery.js 中的错误模块未找到：错误：不能 解决“导航器”在 'E:\WebstormProjects\innovation-node-server-2.0\node_modules\jquery\lib' @ ./~/jquery/lib/node-jquery.js 17:25-45 @ ./src/lib.ts @ ./src/main.ts@multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

./~/jsdom/lib/jsdom/living/xmlhttprequest.js 模块中的错误不是 发现：错误：无法解析“child_process” 'E:\WebstormProjects\innovation-node-server-2.0\node_modules\jsdom\lib\jsdom\living' @ ./~/jsdom/lib/jsdom/living/xmlhttprequest.js 4:18-42 @ ./~/jsdom/lib/jsdom/browser/Window.js @ ./~/jsdom/lib/jsdom.js @ ./~/jquery/lib/node-jquery.js @ ./src/lib.ts @ ./src/main.ts @ 多 webpack-dev-server/client?http://localhost:4200./src/main.ts webpack: 编译失败。

【问题讨论】：

删除你的node_nodules文件夹并重新安装，看起来你有一个损坏的包。

@James 我删除了我的 node_nodules 文件夹，直到我下载了另一个包 ex。 npm install --save @types/mongoose.在此之后我得到了同样的错误。我没有再次删除该文件夹，而是运行了 npm install 并修复了它。为什么我每次都需要这样做？

您使用的是webpack-dev-server 或webpack -w 之类的东西吗？有时他们可能会过早地重新编译，从而使事情处于一个有趣的状态。

@James 我不确定。这是我可能应该知道的。我运行 ng serve 并且它有效。我没有看到“服务”作为要在我的 package.json 文件中运行的脚本的名称。

恐怕我不熟悉 Angular，但我认为 ng serve（仅基于名称）会做类似的事情。尝试终止该进程，然后安装软件包并检查相同的问题是否仍然存在。

【参考方案1】：

Angular cli 在内部使用包并安装它们，因此您不会在 package.json 文件中看到它们，因此请删除您的 wepback 配置文件。如果你想完全控制包使用 ng 弹出，你会看到 webpack 配置文件，但你会丢失 ng --any 命令。并重新检查您如何将 jquery 添加到项目中。