如何更改 Meteor 加载 Javascript 文件的顺序？

Question

当你使用 Meteor 框架创建一个项目时，它会将所有文件打包在一起，但似乎没有办法明确地说“我希望这个文件在那个文件之前加载”。

比方说，我有 2 个 javascript 文件： foo.js 和 bar.js.

文件 bar.js 实际上包含取决于里面的代码 foo.js 但流星正在加载 bar.js 前 foo.js, ，打破了这个项目。

• 在 节点.js 我会简单地使用 require('./bar') 里面 foo.js
• 在里面 浏览器, ，我会放一个 <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

你总是可以使用 JS 加载器，比如 yepnope.js 并将其添加到 client.js 文件中。这对我有用。

Answer 4

我有一组在公共命名空间（js 全局）下构造的实用函数。

IE。

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

然后在子文件夹中：

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

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

我还有一堆使用 Utils 及其子对象的代码。

显然，这个结构首先不能作为 Meteor 加载子文件夹。

为了使其按预期工作，我必须创建具有无意义名称的 /subfolder/subfolder/subfolder ，然后将根对象推入最深的子文件夹中，并将分支对象推入不太深的子文件夹中。

这对我的口味来说是非常违反直觉的，并且容易出错（假设您有文件夹结构更深的组件）。

为了解决这个问题，我使用了带有 defers 和 Promise 的 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 一切都已经初始化了。否则，如果您希望在早期阶段对初始化顺序进行细粒度控制，这可能是一个解决方案。