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

但脚本似乎没有按预期加载。我得到一个错误，＃34; angular＆＃34;在app.js的第1行找不到。

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。您可能需要检查您的其他库是否遵循AMD specification。

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

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

在这篇文章中，“define（'ngStorage'，['angular']”告诉requireJS模型名称是ngStorage并且有一个依赖关系：angular。

如果lib包含在“paths”部分中有类似的行，requireJS会将其作为依赖关系加载到AMD，否则你需要编写shim来使你的lib支持AMD规范。

请注意，您可能需要包含jQuery以及查看引导之前。你应该有的路径 'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min'

在垫片中你需要：“bootstrap”：[“jquery”]，

正确设置require.js

1 个答案: