node.js - 如何将缩小的第三方库加载或添加到 webpack 应用程序中？

Question

我有很多旧库，我需要将它们包含在我的 javascript 应用程序中，但是由于 webpack，我有几个错误。

我重现错误：

• webpack-starter 示例
• 从https://code.jquery.com/下载的 jquery 脚本

#1

如果我将缩小版本添加<script src="jquery-3.5.1.min.js"/>到 index.html 中，我会收到此错误：

WARNING in ./src/jquery-3.5.1.min.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

/tmp/workspacew/webpack-starter/src/jquery-3.5.1.min.js
  2:218    error  Missing semicolon  semi
  2:224    error  Missing semicolon  semi
  2:377    error  Missing semicolon  semi
  2:418    error  Missing semicolon  semi
  2:582    error  Missing semicolon  semi
  <a lot of similar lines>

@ ./src/index.html 3:33-65
@ ./src/scripts/index.js

ERROR in   Error: webpack-internal:///./src/jquery-3.5.1.min.js:116
E = C.document,
     ^
TypeError: Cannot read property 'document' of undefined

- jquery-3.5.1.min.js:116 eval
webpack-internal:///./src/jquery-3.5.1.min.js:116:13

#2

如果我将未压缩的版本添加<script src="jquery-3.5.1.js"/>到 index.html 中，我会遇到类似的错误（没有Missing semicolon错误行）：

ERROR in   Error: webpack-internal:///./src/jquery-3.5.1.js:154
var document = window.document;
                      ^
TypeError: Cannot read property 'document' of undefined

#3

如果我import '../jquery-3.5.1.min.js';在我的条目 index.js 中添加，我会得到相同的错误行：Missing semicolon。

#4

如果我import '../jquery-3.5.1.js';在我的条目 index.js 中添加，jquery已正确加载。但这不是我的情况，因为我的文件已经被缩小了。

我的问题是

如何使用已经以简单方式缩小的第三方库（不是作为 npm 模块），例如：

<script src="jquery-3.5.1.min.js"/>

我必须在我的index.js中手动加载它们吗？

研究、尝试、解决方法

• webpack-merge-and-include-globally
  • 这声称将所有第三方库合并到一个 vendor.js 文件中。但根据我的尝试，只需在构建过程之后工作
• 在另一台服务器上托管缩小文件并使用

<script src="htt://another.host.com/jquery-3.5.1.min.js"/>，工作！

• 下一次尝试：使用https://github.com/shoutem/webpack-prepend-append添加缩小文件：s

标签： node.jswebpackwebpack-4