正確設置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的第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"] } }

有關shim的詳細信息，請參閱requireJS API 。您可能需要檢查其余庫是否遵循AMD規范 。

例如，您已經包括ngStorage，請查看它，在vendor / 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以及外觀引導程序之前。 在路徑中，您應該具有'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min'

而在填充中，您需要：“ bootstrap”：[“ jquery”]，