如何使外部库在 webpack 中工作

Posted 2023-03-07

【中文标题】如何使外部库在 webpack 中工作

【英文标题】：How to make external lib work in webpack

【发布时间】：2018-04-11 15:21:57

【问题描述】：

我一直在努力在我的 webpack 项目中制作我所有的外部库。直到今天一切似乎都有效，现在一切都再次崩溃，我不明白为什么。这可能是由于我的配置在以前版本的 webpack 或其他东西中幸运地工作过。有人知道如何正确配置外部吗？一步一步地遵循 webpack doc 会导致没有结果。这是我的相关代码：

webpack.config.js

externals: 
    jquery: 'jQuery',
    d3: 'd3',
    lodash : '_',
    moment: 'moment',
    backbone: 'Backbone',
    "pdfjs-dist": "window.pdfjsLib"

我还有一个关于jquery的插件

plugins: [
    new webpack.ProvidePlugin(
        $: 'jquery'
    )
]

index.html

<script src="./vendor/lodash.js"></script>
<script src="./vendor/jquery.js"></script>
<script src="./vendor/d3.js"></script>
<script src="./vendor/moment.js"></script>
<script src="./vendor/backbone.js"></script>
<script src="./vendor/pdf/pdf.min.js"></script>
<script src="./app-asd98u9a8d.js"></script>

这是我的主要脚本示例。它在$(document) 行崩溃

import * as $ from 'jquery';
$(document).ready(function()
  ...

错误是Uncaught TypeError: $ is not a function

注意 $ 已定义非常重要......但它不是正确的对象。如果此时我想要正确的对象，它应该是$.default。所以就像导入没有给我正确的对象一样。

我错过了什么？

提前致谢

【问题讨论】：

问题似乎在于导入 import * as $ from 'jquery;' 而不是 import $ from 'jquery';。问题是打字稿说在 jquery lib 中没有默认导出，基于与 lib 一起的 d.ts 文件

【参考方案1】：

好的，我设法让它工作。通过查看生成的代码，我发现在import * as $ from 'jquery' 的情况下调用的函数按预期返回一个不包含默认导出的全局变量，即使它存在。将所有调用替换为 let $ = require('jquery') 修复了它，因为它现在会查找默认导出。