Question

我在客户端使用backbone + requirejs + bootstrap和服务器端的php REST创建了一个网站。该网站包含许多.js文件。我在需要时使用requirejs加载.js（实现异步加载）。

但是，我最近开始使用Node.js + Yeoman + grunt + bower。我使用Yeoman webapp生成器再次创建我的web的基本结构。当我构建我的网站时，它将所有.js文件连接成一个单独的.js文件，并将标记放在index.html上以引用它。根据我的理解，优点是整个.js都缓存在客户端的浏览器中。这在第一次访问时很慢，但在重新访问时很快。由于所有内容都是1个文件并且它被加载到客户端的浏览器，所以我想在这种情况下异步加载不起作用。（如果我错了，请纠正我。）

* 为移动和桌面创建了网站。（1 src for 2 version）

我应该在1个单个文件中连接所有.js文件
或者我应该在需要时使用requirejs来要求.js（异步加载）？
如何在Node中配置requirejs。我已经以正常方式尝试了它（在index.html中包含data-main，当我使用grunt build编译时。它给我错误＆＃34; ...不再支持＆＃34;。
浏览器类似于Node中的requirejs吗？

我花了一个星期的时间来弄明白，但仍然没有运气。希望有人能指出我正确的方向。非常感谢。

.js文件结构是这样的：

-app 
  -vendor
    -jquery.js
    -backbone.js
  -assets 
    -js
      -model 
        -person.js
      -collection
        -people.js
      -router.js
      -controller.js
-dist
  -js
    -build.js

Answer 1

我有熟悉的问题。所以让我们从文件连接的策略开始。有三种主要方式可以遵循：

首先 - 总是将所有模块连接在一个文件中，在这种情况下，您在第一次启动时松开并可能赢或下次启动，但您可能面临另一个问题 - 您一次使用连接文件中少于一半的模块，但总是加载所有模块。

第二种方法是为每种类型的页面构建具有特定模块集的特定连接文件 - 因此您知道您拥有多少页面类型并为每个页面构建文件 - 此后您可以减小文件大小，但很难维护并且在页面更改时需要手动设置校正。

第三 - 使用libs和模块构建1个连接文件，这些文件几乎在所有页面上使用，所有其他内容（附加模块，视图，特殊模型和集合）按需加载。这种方式适用于SPA页面。

让我谈谈grunt + r.js配置。

首次保留此link。以下是配置示例：

requirejs: {
  compile: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      name: "path/to/almond",
      out: "path/to/optimized.js"
    }
  }
}

这里的主要观点是mainConfigFile - 它是一个文件然后你保留 require.config

下一步 - 配置r.js - 保持这个link非常有用，描述r.js的所有可能性。

通常它足以检查这些链接。

此外，您可以结帐recommend file structure查看多页网站，以避免日后出现问题。

此处还有指向similar post的链接 - 您可能会发现它很有用。

如果您有任何其他问题，请与我们联系。

关于CSS的几句话 - 逻辑几乎相同：你可以为每个页面构建单独的文件或创建sinngle。这里的要点是您的网站有多大。在我的情况下，我选择了第二种选择，但说实话，第一种选择更具可扩展性，尤其是在大型项目中

Answer 2

我现在可以让requirejs与Backbone配合使用。但是，我不能使用Marionette的错误，例如＆＃34; Backbone未定义＆＃34;。我已经用这个命令安装了Marionette＆＃34; bower install marionette --save＆＃34;。我在google上做了一些搜索，有人说使用AMD版本的Marionette应该解决这个问题，用AMD版本替换Marionette之后就可以了。

但我的问题是如何使用＆＃34; bower install＆＃34;安装AMD版本的Marionette？
我的网站使用bootstrap。当我使用＆＃34; grunt build＆＃34;编译网页时。它从＆＃34; app / bower_components / bootstrap / dist / fonts＆＃34;复制bootstrap＆＃39; s字体。 to＆＃34; dist / bower_components / bootstrap / dist / fonts＆＃34;但网站上的字体是＆＃34; dist / fonts＆＃34;。如何更改它以引用正确的目录？

我使用yo webapp（带引导程序）来生成我的网络结构。

grunt concat js / css

2 个答案: