如何更改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中处理这些全局变量。 否则，如果您想在早期阶段对初始化顺序进行细粒度的控制，那可能是一个解决方案。