尝试使用Webpack访问Backbone.js视图模板内的javascript模块时出现问题

我正在对一个Java Web应用程序进行一些维护，该应用程序由JSON API和基于Backbone.js和React的UI组成，并使用Webpack捆绑在一起。
这个应用程序有一个主页面index.html和一个相应的main.js。这个main.js导入了一些Javascript模块，这些模块本身又导入了一堆其他模块，大致如下所示：

import Configuration from "com/MyConfiguration";

Configuration.loadEventHandlers();

这个配置模块导入了一系列其他的视图，最终导入了一些扩展了 Backbone.js 视图的视图。它们看起来像这样：

const MainView = AbstractView.extend({
    template: "common/DefaultBaseTemplate",
    baseTemplate: "common/MainTemplate",
    data: {},
    events: {
        "click input[type=submit]": "formSubmit"
    },

这些视图会载入类似以下的Handlebars样板：

<div class="container">
    <p class="pull-right footer-text">
        {{#if theme.settings.footer.showversion}}
            {{version}}
            <br/>
        {{/if}}
        {{theme.settings.footer.copyright}}
    </p>
</div>
<script type="text/javascript">
  SetTimeout(function(){
    doSomeTrick();
  }, 3000);
</script>

他们还加载了类似以下的车把部分：

<button class="btn btn-default"
        type="button"
        {{#if disabled}}disabled="{{disabled}}"{{/if}}
        {{#if data}}data-{{data}}{{/if}}>
     {{#if icon}}<i class="fa {{icon}}"></i> {{/if}}{{t title}}
</button>
<script type="text/javascript">
  SetTimeout(function(){
    doSomeTrick();
  }, 3000);
</script>

最后，我们有一个自定义javascript模块“custom.js”，如下所示：

import $ from "jquery";

export function doSomeTrick() {
  // some fancy code using jquery
}

该应用程序的结构如下所示：

- config
  - webpack => webpack config
- src
  - js
    - custom => customized javascript sources, example: custom.js
    - com => product sources, including Views, example: AbstractView.js
  - resources
    - css
    - images
    - partials => HTML Handlebars Partials, example: _Button.html
    - templates => HTML Handlebars Templates, example: Footer.html

我正在将应用程序从一个没有与Webpack捆绑的旧版本迁移到一个新版本，引用自定义Javascript模块“custom.js”。问题是，这些对位于自定义模块“custom.js”内部的Javascript函数的引用在带有Webpack的新版本中不再得到解决。如果我直接在main.js中调用这些Javascript函数，或者在导入自定义的.js后在AbstractView.js中调用这些函数，效果会很好。但是我不明白如何将这个模块导入到Handlebars模板和partials中。我想一个解决方案是将这个js库直接复制到dist目录中，然后在模板中引用它，但是这有点违背了使用Webpack的初衷。
在模板和部分代码中加载这个模块的正确方法是什么？我需要使用一个特殊的Webpack加载器吗？我认为使用HtmlWebpackPlugin没有什么帮助，因为我不需要在dist目录中额外的HTML，而是需要将模板和_partials嵌入到应用程序的javascript中，但要有对自定义库的工作引用。
我尝试不显式导入模板和分部中的模块，因为我认为如果在视图中导入模块，模块将可用，但它不起作用。
我还尝试在模板和分部中显式导入模块，如下所示：

<script src="custom/custom.js"></script>

但是当浏览器尝试解析这个路径时，它不起作用，因为所有内容都使用webpack捆绑在一起，所以这个路径并不存在。
我已经找了很长时间了，但是没有找到解决这个问题的方法。任何帮助都将不胜感激。
谢谢你！

我找到了解决问题的办法，虽然可能不是最干净的。
问题的关键似乎在于Javascript中变量的作用域。实际上，javascript模块只在它们被导入的作用域中可见，这就是为什么你在Javascript控制台中看不到导入的模块函数和变量。
在我的例子中，视图是Backbone的一个虚拟结构，模板和分部动态地绑定到DOM（$el）的一些元素。在模板和分部HTML上下文中，我的经验是可以使用这样的语句导入模块：

<script src="/path/to/module"></script>

但是这种方法有局限性，因为不能直接在模板或部分模板中编写脚本和模块引用，而是必须为每个模板创建一个Javascript模块。使用下面的语句对我不起作用：

<script type="module">
  import { myExportedNamedFunction } from "myModule";
  myExportedNamedFunction();
</script>

这会抛出一个错误，指出myModule不导出这样的函数。如果在HTML上下文之外运行同样的函数，它会正常工作，例如在我的“main.js”中。到目前为止，我的假设是HTML代码中的Javascript代码不能正确解释模块代码，尽管javascript解析本身是有效的（我们可以在网络跟踪中看到200）。
我找到的解决方案是直接在Global上下文中导入Module，并从那里引用它。
Main.js

import * as myModule from "myModule";
window.myModule = myModule

Template.html，直接在Javascript中：

myModule.myFunction()

我希望这能帮助一些人，并期待着一个关于使用Webpack的更干净的方法的提示。

尝试使用Webpack访问Backbone.js视图模板内的javascript模块时出现问题

1条答案

相关问题

热门标签

最新问答