Question

我一直在努力在我的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。所以，如果导入不能给我正确的对象。

我错过了什么？

提前致谢

Answer 1

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

如何在webpack中使外部lib工作

webpack.config.js

的index.html

1 个答案: