將Javascript/jquery文件逐步重構爲ES6模塊

-1

我正在用es6模塊/ webpack將一個非常大的JavaScript文件重構爲多個文件。首先，我將單個函數從giantFile.js移出到singleFunction.js，然後將這個新函數文件導入到index.js中，這是webpack創建bundle.js的入口點，然後將其包含在我的template.html文件作爲腳本標記。在我的模板文件中，我還將giantFile.js作爲腳本標記包含在singleFunction.js中調用函數。將Javascript/jquery文件逐步重構爲ES6模塊

它只是一個以正確順序導入腳本的情況，還是我錯誤地理解了giantFile.js如何訪問新創建的模塊。

目前，在控制檯中，當我輸入singleFunction（）時，我收到'未定義'的錯誤信息'，因此檢查我的理解是正確的，我可以在進一步調試之前使用模塊。如果任何人都可以指向我的重構前端JavaScript和最好的折扣，這將非常讚賞一些很好的資源。非常感謝。

在singleFunction.js

`export default function singleFunction() {...}`

在index.js

import singleFunction from './components/singleFunction'

在template.js

<script src="/frontendHotness/components/singleFunction.js"></script> 
<script src="/unstructuredMess/js/giantFile.js"></script>

來源

2016-06-27 matt-p

你會很好地在圖表中顯示層次結構而不是敘述它......我對第二句話失去興趣.. – Jonathan

您giantFile.js的的WebPack編譯版本仍然應該是你的應用程序的入口點和唯一使用嵌入到HTML文件中的文件標記。

在重構過程中，您應該逐漸將良好封裝的功能位移入單獨的文件或模塊中。那些模塊export的功能，被依賴模塊使用。

您的父模塊，在這種情況下，giantFile.js現在可以import它所依賴的不同模塊。這些依賴關係將由webpack解決，webpack會將您的父模塊及其所有依賴關係移到一個可從HTML頁面加載的JavaScript文件中。

請注意，此依賴關係樹可以是任意深的 - 您的子模塊本身可以依賴於其他模塊。但是，您應該確保您的模塊在與其他模塊鬆散耦合的同時封裝了執行一項特定工作的功能。還避免循環依賴。

來源

2016-06-27 17:29:39 Timo

感謝您的迴應TimoSta。然而，giantFile.js包含在頁面的jinja模板中提供的變量，並且如果我通過webpack放置整個giantFile.js，我似乎無法訪問這些變量。 –

ES6的一大優勢模塊是他們的內部變量不*污染全局狀態，並且因此不能從模塊之外的任何地方訪問，除非他們已經明確聲明瞭模塊的導出。儘管我個人從未與Jinja合作過，但對谷歌搜索「Jinja Webpack」的搜索結果也是如此。在[本npm模塊]（https://www.npmjs.com/package/jinja-loader）中。也許他們提供了一個好方法來解決你的問題？ – Timo

將Javascript/jquery文件逐步重構爲ES6模塊

回答

相關問題