正确设置require.js

Question

这是我的文件所在的位置

├── public
│   ├── require.js // downloaded from site
│   ├── config.js // generated from grunt-bower-requirejs
│   ├── app
│   ├── css
│   ├── vendor
│   │   ├── angular
│   │   ├── angular-bootstrap
│   │   ├── angular-ui-router
│   │   ├── bootstrap
│   │   ├── jquery
│   │   └── ngstorage
│   └── views

这是我的config.js

require.config({
  shim: {

  },
  paths: {
    angular: "vendor/angular/angular",
    "angular-bootstrap": "vendor/angular-bootstrap/ui-bootstrap-tpls",
    "angular-ui-router": "vendor/angular-ui-router/release/angular-ui-router",
    bootstrap: "vendor/bootstrap/dist/js/bootstrap",
    ngstorage: "vendor/ngstorage/ngStorage",
    require: "vendor/require/build/require.min"
  },
  packages: [

  ]
});

我的index.html中的代码是：

<script data-main="config" src="require.js"></script>
<script src="app/app.js"></script> // for angular

但是脚本似乎没有按预期加载。我得到一个错误，在app.js的第一行找不到"angular“。

Answer 1

paths: { angular: "vendor/angular/angular", "angular-bootstrap": "vendor/angular-bootstrap/ui-bootstrap-tpls", "angular-ui-router": "vendor/angular-ui-router/release/angular-ui-router", bootstrap: "vendor/bootstrap/dist/js/bootstrap", ngstorage: "vendor/ngstorage/ngStorage", require: "vendor/require/build/require.min" }, shim: { "angular' : {"exports" : "angular"}, "angular-bootstrap':["angular"], "angular-ui-router':["angular"] } }

有关填充程序的详细信息请参阅requireJS API.You可能需要检查您的rest库是否遵循AMD specification。

例如，您已经包含了ngStorage，请查看它，在供应商/ngstorage/ngStorage.js的顶部，您可以看到如下所示的行：

if (typeof define === 'function' && define.amd) { define('ngStorage', ['angular'], function(angular) {

在这篇文章中，“define(' ngStorage '，' angular‘”)告诉requireJS模型名是ngStorage，并且有一个依赖项:angular。

如果包含在"paths“部分库中有类似的行，则requireJS会将其加载为遵循AMD的依赖项，否则您需要编写填充程序以使您的库支持AMD规范。

请注意，您可能需要包括jQuery以及之前的bootstrap。在路径中，你应该有'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min'

而在shim中你需要："bootstrap"："jquery"，