我正在對由 JSON API 和基于 Backbone.js 和 React 的 UI 組成的 Java Web 應用程式進行一些維護，并使用 Webpack 捆綁。
這個應用程式有一個主頁面 index.html 和相應的 main.js。這個 main.js 匯入了幾個 Javascript 模塊，這些模塊本身匯入了一堆其他模塊，大致如下所示：
import Configuration from "com/MyConfiguration";
Configuration.loadEventHandlers();
這個配置模塊自己匯入了一堆其他的，最終匯入了一些擴展 Backbone 視圖的視圖。它們看起來像這樣：
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>
他們還像這樣加載 Handlebars 部分：
<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，它們參考了自定義 Javascript 模塊“custom.js”。問題是這些對位于自定義模塊“custom.js”中的 Javascript 函式的參考在新版本的 webpack 中不再解決。如果我在匯入 custom.js 后直接在 main.js 或 AbstractView.js 中呼叫這些 Javascript 函式，效果很好。但是我不明白如何在 Handlebars 模板和部分中匯入這個模塊。我想一種解決方案是將這個 js 庫直接復制到 dist 目錄并在模板中參考它，
在模板和部分中加載這個模塊的正確方法是什么？我需要為此使用特殊的 Webpack 加載器嗎？我不認為使用 HtmlWebpackPlugin 會有所幫助，因為我不需要 dist 目錄中的額外 HTML，而是需要將模板和 _partials 嵌入到應用程式的 javascript 中，但使用對自定義的作業參考圖書館。
我嘗試不顯式匯入模板和部分中的模塊，因為我認為如果在視圖中匯入該模塊將可用，但它不起作用。
我還嘗試在 Templates 和 Partials 中顯式匯入模塊，如下所示：
<script src="custom/custom.js"></script>
但它不起作用，因為瀏覽器試圖決議這個不存在的路徑，因為所有東西都是使用 webpack 捆綁的。
我一直在尋找很長時間，但找不到解決這個問題的方法。任何幫助將不勝感激。
謝謝！
uj5u.com熱心網友回復：
我找到了解決問題的方法，雖然可能不是最干凈的。
問題的關鍵似乎是關于 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）。
我找到的解決方案是直接在全域背景關系中匯入模塊并從那里參考它。
主.js
import * as myModule from "myModule";
window.myModule = myModule
Template.html，直接在 Javascript 中：
myModule.myFunction()
我希望這可以幫助某人，并期待有關使用 Webpack 的更清潔方法的提示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/524722.html