如何在 Meteor 应用上正确加载样式表和脚本。答案

【问题标题】：How to properly load style sheets and scripts on a Meteor App.如何在 Meteor 应用上正确加载样式表和脚本。
【发布时间】：2016-06-21 13:25:50
【问题描述】：

我正在使用 Meteor 构建仪表板，我从 http://themeforest.net/ 购买了一个设计模板 (HTML)，但不知道如何将此设计模板正确集成到我的 Meteor 应用程序中。

问题很简单，我在尝试加载设计模板正常运行所需的 css 文件和 js 文件列表时遇到了麻烦。我认为文件没有按正确的顺序加载，这会导致错误。例如，一半的 jquery 插件无法正常工作，这可能是因为插件文件在 jquery 文件本身之前被加载。我可以在网络中看到正在加载文件，但例如函数 $.sortable 不可用。

加载样式表和 javascript 文件以确保它们以正确的顺序加载的正确方法是什么？

第一个问题是我不知道将这些文件放在哪里。我的应用程序的逻辑不需要这些文件，所以我不想把它放在目录客户端中。另外，如果我将它们放在客户端 Meteor 中会自动加载它们，然后我无法控制它们的加载顺序。

所以我把所有的模板设计依赖文件放在公共文件夹中，并尝试手动加载文件。

我尝试了以下方法来加载文件：

1.导入client/main.html文件中的所有文件：

<head>
    <meta charset="UTF-8">
    <title>ETL Web-Admin</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>


    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
    ...
    <!-- ================== END BASE CSS STYLE ================== -->


    <!-- ================== BEGIN BASE JS ================== -->
    <script src="/plugins/jquery/jquery-1.9.1.min.js"></script>
    ...
    <script src="/plugins/jquery-cookie/jquery.cookie.js"></script>
    <!-- ================== END BASE JS ================== -->

</head>

2。导入client/main.js文件中的所有文件：

Meteor.startup(function () {
});



// <!-- ================== BEGIN BASE CSS STYLE ================== -->
    import "../public/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css"
    ...
// <!-- ================== END BASE CSS STYLE ================== -->

// <!-- ================== BEGIN BASE JS ================== -->
    import "../public/plugins/jquery/jquery-1.9.1.min.js"
    ...
//     <!-- ================== END BASE JS ================== -->

上面的两种方法都给出了同样的问题，依赖项没有正确加载。

最后初始化设计模板，当所有元素都加载完毕并且（用 jquery 术语）文档准备好时，我必须调用两个函数：

App.init()
// and 
Dashboard.init()

在传统的 HTML 格式中，可以这样做：

<script>
        // when document is ready, do something
        $(document).ready(function () {
            App.init();
            Dashboard.init();
        });
</script>

我如何在 Meteor 中做到这一点？

【问题讨论】：

标签： meteor meteor-blaze

【解决方案1】：

使用 Meteor 项目的结构，你在 css 中的文件客户端 > 样式表你在客户端的 jquery > youNameTemplate.js

Template.youNameTemplate.rendered = function () {
    App.init();
    Dashboard.init();
}

【讨论】：

当您完成应用程序的开发并投入使用时，建议将所有资产文件（CSS 和图像）托管在 CDN 上