javascript - 如何使用meteor将三个js代码放入单独的JS文件中

Question

好吧，我有一个 meteor 应用程序，我正在尝试制作包含三个动画的模板，这样我就可以通过加载特定模板来加载特定动画。我想通过取出脚本标签并将它们移动到单独的 JavaScript 文件来整理我的 HTML 文件，但这不起作用。我最终只是将 JavaScript 放入 HTML 中，它就起作用了。我本来打算继续这样做并忍受困惑的代码，但现在我遇到了问题。

出于某种奇怪的原因，即使 for 循环位于脚本标记内，计算机也会看到 <签名并期待 html 标签。起初我以为我忘记了结束标签之类的东西，但我检查了一下，发现没有。如果我删除 for 循环(仅创建一个粒子)，一切都会再次完美运行。我可以通过仅使用 < 的转义字符来解决此问题符号( < )，但我认为我应该找到解决总体问题的方法，这样我将来就不会遇到类似的问题。

我想在 HTML 文件中放入尽可能少的 JavaScript。 ( meteor 不喜欢，我也不喜欢。)

如果我尝试将 JavaScript 复制并粘贴到单独的文件中，它将找不到 min. Three.js 文件(它告诉我 THREE 未定义)

我不想使用像 require.js 这样的其他框架，主要是因为我不确定如何使用，但如果这是唯一的方法，我会作为最后的手段

THREEjs 的所有示例都将代码直接放入 HTML 文件中，但如何将其放入单独的 javascript 文件中并确保 javascript 文件找到 min. Three.js？

这是模板外观的概述。我使用 jQuery 查找 actualAnimation2并将容器附加到其中。您还可以找到所有代码here

<template name = "animation2">
  <div id = "animation2" class = "centered">
    <div class = "line"></div>
      <h1>Animation 2</h1>
    <div class = "line"></div>
    {{> animationButtons}}
    <!--Put in a threejs animation here -->
    <div id = "actualAnimation2" class = "animation">
      <script src="client/three.min.js"></script>
      <script>
        //THREEjs stuff here
        //This is what I want to move
      </script>
    </div>
  </div>
</template>

tl;dr:如何让 THREEjs 与 Meteor 配合良好？

欢迎提出任何建议，如果我可以澄清任何问题，请告诉我。感谢您的帮助!

Answer 1

引用http://docs.meteor.com/ :

Some JavaScript libraries only work when placed in the client/compatibility subdirectory. Files in this directory are executed without being wrapped in a new variable scope. This means that each top-level var defines a global variable. In addition, these files are executed before other client-side JavaScript files.

这正是 two.min.js 需要完成的事情，因为文件的开头如下所示:

// threejs.org/license
'use strict';var THREE={REVISION:"68"};

所以你需要将two.min.js放入cient/compatibility/中。

但是您最好使用软件包，仔细选择更有可能在几周左右快速升级到修订版 69 的软件包。