如何更改Meteor加載Javascript文件的順序？

Question

當您使用Meteor框架創建項目時，它將所有文件打包在一起，但是似乎沒有一種方法可以明確地說“我希望在該文件之前加載該文件”。

例如，假設我有2個javascript文件： foo.js和bar.js

bar.js文件實際上包含的代碼與foo.js內部的代碼foo.js但是Meteor正在bar.js之前加載foo.js ，這破壞了項目。

• 在node.js中，我只是在foo.js使用require('./bar')
• 在瀏覽器中，我會把一個<script>標簽指向foo.js和另一個后，指着bar.js ，以加載正確的順序文件。

我們如何在流星中做到這一點？

Answer 1

根據Meteor文檔，當前按以下順序加載文件：

1. 首先加載[project_root] / lib中的文件
2. 文件按目錄深度排序。 首先加載更深的文件。
3. 文件按字母順序排序。
4. main。*文件最后加載。

來源： http ： //docs.meteor.com/#structuringyourapp

Answer 2

並非所有情況的解決方案，但我認為理想情況下，任何依賴於其他代碼的內容都應放置在Meteor.startup函數中，以確保所有內容均已加載。

Answer 3

您可以始終使用yepnope.js之類的JS加載器，並將其添加到client.js文件中。 這對我有用。

Answer 4

我在通用名稱空間（全局js）下構造了一組實用程序函數。

即

// utils/utils.js
Utils = {};

然后在子文件夾中：

// utils/validation/validation.js
Utils.Validation = {};

// utils/validation/creditCard.js
Utils.Validation.creditCard = ... // validation logic etc

我也有一堆使用Utils及其子對象的代碼。

顯然，此結構首先不能用作“流星”加載子文件夾。

為了使其按預期工作，我必須使用無意義的名稱創建/ subfolder / subfolder / subfolder，然后將根對象推入最深的子文件夾中，並將分支對象推入不那么深的子文件夾中。

這對於我的品味和容易出錯的情況來說是非常違反直覺的（假設您的文件夾結構中的組件甚至更深）。

為了解決這個問題，我使用了帶有延遲和承諾的Q庫。 解決方案仍然不是很干凈，因為它使您可以重復執行例程代碼並進行檢查，但是它可以讓您完全控制加載順序，而不會弄亂目錄結構（對那些說您可以根據需要組織流星代碼的人問好）。

例：

//utils.js
UtilsDefer = UtilsDefer || Q.defer();
UtilsDefer.resolve({
    // here some root utils stuff
});

//cards.js
// here we'll depend on Utils but don't want to care about directory structure
UtilsDefer = UtilsDefer || Q.defer(); // it will be a) already 
// resolved defer from utils.js, or b) new defer that will
// be resolved later in utils.js
UtilsDefer.then(function(Utils) {
    // do something with utils usage, or for instance add some fields here
    Utils.CreditCardDefer = Utils.CreditCardDefer || Q.defer();
    Utils.CreditCardDefer.resolve({
        // Credit card utils here
    })
});

//someOtherFile.js
// it will be pain to use sub-objects with this method though:
UtilsDefer = UtilsDefer || Q.defer();
UtilsDefer.then(function(Utils) {
    Utils.CreditCardDefer = Utils.CreditCardDefer || Q.defer();
    Utils.CreditCardDefer.then(function(CreditCard) {
        // do stuff with CreditCard _if_ you need to do it on startup stage   
    })
});

這是一個用例非常狹窄的示例，因為大多數情況下，您會滿意於在某些已經初始化的用戶交互回調或Meteor.startup中處理這些全局變量。 否則，如果您想在早期階段對初始化順序進行細粒度的控制，那可能是一個解決方案。