时间戳

首页 > 解决方案 > 如何从 HTML 调用缩小的函数？

javascript - 如何从 HTML 调用缩小的函数？

问题描述

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

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

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

在拉入 jQuery 之后，我直接从我的 HTML 页面调用它map.js（每个应用程序的页面都与一个特定的地方相关，所以我想绘制该地方的地图）：

<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。

我已经安装了 jQuerynpm并修改了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。

我究竟做错了什么？我应该如何以不同的方式做事？我搞不清楚了。

- - 更新 - - -

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

标签： javascript

解决方案

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

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

快乐编码！

推荐阅读