如何在meteor中正确导入js文件

Question

我喜欢让我的 javascript 文件尽可能小并使用architectural pattern。这通常意味着将我的 js 文件拆分为服务、控制器、模型、视图等。

Meteor 会自动加载所有的 js 文件。但是，在任何 js 文件中定义的每个变量都作为该文件的局部变量处理。为了能够访问它们，我必须像这样定义它们：

//global
my_global_function = function(){

}

//not global
var my_global_function = function(){

}

//not global
function my_global_function(){

}

在没有关键字var 或function 的情况下定义变量/函数不是好的做法。有哪些可能的替代方案？

Answer 1

最好的选择是使用 ES2015 模块。

Meteor 本身还不支持模块，但有一些包提供了这种支持。

例如，universe:modules。

使用模块，您可以导入和导出一些变量/函数/类/等：

// module1.import.js
import alertSomething from './module2'

Meteor.startup(() => {
  alertSomething();
});

 

// module2.import.js
export default function alertSomething() {
  alert('something');
}

---

universe:modules 不是唯一的解决方案，还有其他类似的项目。我特别喜欢这个https://github.com/thereactivestack/kickstart-simple。它用 WebPack 替换 Meteor 的构建系统，如果你使用 React，它会启用热重载。

更新：

Meteor 现在确实支持 ES6 模块

Answer 2

由于您似乎对适当的架构设计非常感兴趣，我建议您查看 Meteor 包。本质上，您必须在 package.js 配置中声明任何全局公开的变量，这就是您想要的：尽可能少的“泄漏”。在一个包中，您可以稍微马虎一点，但您仍然可以使用var（并且没有var）在包中进行更细粒度的控制。这现在可以在 Meteor 中完成。

您可以在package documentation 中找到大部分信息。最简单的开始方法是使用meteor create --package [package-name] 创建一个包。这建立了一个基本的结构。 api.export 函数用于控制公开的变量。见文档here。

此外，请注意在 Meteor 固有架构设计之上添加不必要的层。模板是视图，服务器端方法是服务等。只有一些东西你不能开箱即用，所以通常你会添加类似的东西Astronomy 或 SimpleSchema。

添加太多自己的架构可能会以与 Meteor 框架本身作斗争而告终...