如何更改 Meteor 加载 Javascript 文件的顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10693113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change the order in which Meteor loads Javascript files?
提问by Jeremyfa
When you make a project with the Meteor framework, it packages all the files together, but there doesn't seem to be a way to explicitly say "I want this file to be loaded before that one".
当您使用 Meteor 框架创建一个项目时，它将所有文件打包在一起，但似乎没有一种方法可以明确地说“我希望在那个文件之前加载这个文件”。
Let's say, for example, I have 2 javascript files: foo.jsand bar.js.
比方说，例如，我有 2 个 javascript 文件：foo.js和bar.js.
The file bar.jsis actually containing code depending one the one inside foo.jsbut Meteor is loading bar.jsbefore foo.js, breaking the project.
该文件bar.js实际上包含依赖于内部代码的代码，foo.js但 Meteor 在加载bar.js之前foo.js，破坏了项目。
- In node.jsI would simply use
require('./bar')insidefoo.js - In the browser, I would put a
<script>tag pointing tofoo.jsand another, after, pointing tobar.js, in order to load the files in the correct order.
- 在node.js 中，我会简单地
require('./bar')在里面使用foo.js - 在浏览器中，我会放置一个
<script>指向的标记，foo.js然后放置另一个指向的标记bar.js，以便以正确的顺序加载文件。
How can we do that in Meteor?
我们如何在Meteor 中做到这一点？
回答by agscala
According to the Meteor documentation, files are currently loaded in this order:
根据 Meteor 文档，文件当前按以下顺序加载：
- Files in [project_root]/lib are loaded first
- Files are sorted by directory depth. Deeper files are loaded first.
- Files are sorted in alphabetical order.
- main.* files are loaded last.
- [project_root]/lib 中的文件首先加载
- 文件按目录深度排序。首先加载更深的文件。
- 文件按字母顺序排序。
- main.* 文件最后加载。
回答by Chris
Not a solution for all scenarios, but I think ideally anything that is dependent on other code would be placed in a Meteor.startup function, to ensure everything is already loaded.
不是适用于所有场景的解决方案，但我认为理想情况下，任何依赖于其他代码的东西都将放置在 Meteor.startup 函数中，以确保一切都已加载。
回答by bitIO
You can always us a JS loader like yepnope.jsand add it to the client.js file. This works for me.
您始终可以使用yepnope.js之类的 JS 加载器并将其添加到 client.js 文件中。这对我有用。
回答by Igor Loskutov
I have a set of utility functions that I structured under common namespace (js global).
我有一组在公共命名空间（js 全局）下构建的实用程序函数。
I.e.
IE
// utils/utils.js
Utils = {};
and then in subfolders:
然后在子文件夹中：
// utils/validation/validation.js
Utils.Validation = {};
// utils/validation/creditCard.js
Utils.Validation.creditCard = ... // validation logic etc
also I have bunch of code that uses Utils and it's subobjects.
我也有一堆使用 Utils 的代码，它是子对象。
Obviously, this structure doesn't work as Meteor load subfolders first.
显然，这种结构不能作为 Meteor 首先加载子文件夹。
To make it work as expected, I had to create /subfolder/subfolder/subfolder with meaningless names, and then shove root object in most deep subfolder, and branch objects in subfolders not so deep.
为了让它按预期工作，我必须用无意义的名称创建 /subfolder/subfolder/subfolder，然后将根对象推入最深的子文件夹中，并将分支对象推入不那么深的子文件夹中。
It is extremely counterintuitive for my taste and error-prone (suppose you have component that is even deeper in folder structure).
这对我的品味来说非常违反直觉并且容易出错（假设您有文件夹结构更深的组件）。
To address this issue, I used Q library with defers and promises. Solution still isn't clean as it makes you routine code repeating and checks but it gives you full control over the load order without messing with directory structure (hello to people who says you can organise meteor code as you want).
为了解决这个问题，我使用了带有延迟和承诺的 Q 库。解决方案仍然不干净，因为它使您重复和检查例行代码，但它使您可以完全控制加载顺序而不会弄乱目录结构（向那些说您可以根据需要组织流星代码的人你好）。
Example:
例子：
//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
})
});
This is the example of rather narrow use case, as mostly you will be happy with handling these globals inside some user interaction callbacks or Meteor.startupwhere everything already initialised. Otherwise, if you want fine-grained control over initialisation order on very early stage, that could be a solution.
这是一个相当狭窄的用例的例子，因为大多数情况下，你会很高兴在一些用户交互回调中处理这些全局变量或Meteor.startup一切都已经初始化的地方。否则，如果您想在很早的阶段对初始化顺序进行细粒度控制，那可能是一个解决方案。
