正确设置要求.js

Properly set up require.js

本文关键字：js 设置      更新时间：2023-09-26

这是我的文件所在的地方

├── 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

这是我的配置.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: [
  ]
});

我的索引中的代码.html是：

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

但是脚本似乎没有按预期加载。我收到一个错误，指出在 app.js 的第 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。您可能需要检查您的 rest 库是否遵循 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的依赖加载它，否则你需要写shim让你的库支持AMD规范。

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

在填充程序中，您需要："引导程序"：["jquery"]，

相关文章：