Question

我正在尝试将一个旧的（Django）应用程序转换为在前端使用现代JavaScript以及缩小，模块等。

以前，我有一个简单的map.js文件，它仅具有绘制地图的功能：

function setupMap(lng, lat, zoom) {
    // draw map, based on lat/lng etc
}

在拉入jQuery和map.js（应用程序的每个页面都与特定位置有关，因此我想绘制该位置的地图）之后，我直接从HTML页面中调用了它：

<script src="cdn/link/to/jquery"></script>
<script src="maps.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    setupMap(lat, lng, zoom);
});
</script>

那很好。但是我正在尝试以现代方式做事。因此，我想将jQuery捆绑到文件中，并希望缩小JS。

我已经用npm安装了jQuery，并修改了map.js文件以将其作为模块导入：

var $ = require("jquery");
function setupMap(lng, lat, zoom) {
   // etc

我已经设置webpack.config.js来缩小文件：

module.exports = {
    entry: './index.js',
    output: {
        filename: 'main.min.js',
        path: __dirname
    },
    module: {}
};

并且我已经更新了HTML，使其看起来像这样：

<script src="main.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    setupMap(lat, lng, zoom);
});
</script>

但是现在我从HTML收到一个错误：Uncaught ReferenceError: setupMap is not defined。

我在做什么错？我应该如何做事有所不同？我迷路了。

----更新-----

感谢所有答案！我应该澄清一下，我确实需要 some 页面特定的代码，因为我的Django应用程序每个位置都有一个页面（其中有100个），还有lat和lng变量特定于每个页面。因此，我需要在每个页面上分别调用setupMap函数。

Answer 1

我注意到您在webpack.config.js中使用入口点作为index.js 我相信您应该将map.js文件用作导入jquery并编写自定义脚本的入口点。

或者，您可以创建index.js并将其用作入口点。此外，您可以在其中导入map.js。

快乐编码！

如何从HTML调用最小化函数？

1 个答案: