为静态网站设置 require.js 并像加载库一样加载自定义代码

Question

我是堆栈溢出的新手，我实际上对我的 require.js 设置很好奇，因为这是我第一次使用它并且看到了许多不同的 approaches/examples，我不是确定我到目前为止所做的是否正确。所以，在我的索引上，我有 "head"

<script data-main="js/app" src="js/vendor/require-2.2.0-min.js"></script>

在我的 'body' 末尾，我有 Google 分析代码段。没有直接从索引加载其他脚本。

在我的 $projectroot/js 文件夹中的 app.js 上，我有：

requirejs.config({
   "baseUrl": "js/vendor",
   "paths": {
      "app": "..",
      "jquery" : ['//code.jquery.com/jquery-1.12.4.min','jquery-1.12.4.min'],
      "modernizr" : 'modernizr-2.8.3-respond-1.4.2.min',
      "bootstrap" : ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min','bootstrap.min'],
      "plugins": '../plugins'
    },
    "shim": {
       "bootstrap": ["jquery"],
       "plugins": ["bootstrap"]
    }
});

requirejs(["app/main"]);

此外，我的 main.js 与 app.js 位于同一文件夹中，其中包含：

define([
   "jquery",
   "modernizr",
   "bootstrap",
   "plugins"
], function($)
{
$(function()
{
console.log('required plugins loaded...');
});
});

最后，我的 plugins.js 不是库，而是我需要最后加载的一些自定义 js 代码。到目前为止还好吗？这种方法有什么缺点吗？以类似的方式添加我的自定义 js 代码的其余部分是否可以？非常感谢您的回复！！

Answer 1

为了回答您的问题，我要更改的一件事是将全局依赖项放入您的 main.js 文件中：

define([
   "jquery",
   "modernizr",
   "bootstrap",
   "plugins"
]

像这样进入你的 app.js 文件：

requirejs(["app/main","jquery","modernizr","bootstrap","plugins"]);

这意味着您的全局依赖项将在所有模块之间共享，而不仅仅是在您的 main.js 文件中。这意味着您不必将它们包含在要使用它们的每个文件中。

除此之外，它看起来不错

为静态网站设置 require.js 并像加载库一样加载自定义代码

Setting up require.js for a static website and loading custom code as if it was a library

jquery

google-analytics

modernizr

requirejs

twitter-bootstrap