javascript - 使用 RequireJS 分离脚本

Question

我最近在开发一个网络应用程序，我想将它分成多个模块。我搜索了一下，发现 RequireJs 最适合这个。我阅读了文档和一些关于它的教程并想出了这个

    requirejs.config({
    baseUrl: "js/lib",
    shim: {
        'jquery-1.12.1.min': ['jquery-1.12.1.min'],
        'materialize.min': ['materialize.min'],
        'knockout-3.4.0': ['knockout-3.4.0'],
        'pouchdb-5.3.0.min': ['pouchdb-5.3.0.min']
    },
    waitSeconds: 0,
    paths: {
        'jquery-1.12.1.min': 'jquery-1.12.1.min',
        'materialize.min': 'materialize.min',
        'knockout-3.4.0': 'knockout-3.4.0',
        'pouchdb-5.3.0.min': 'pouchdb-5.3.0.min',
    }   
});
require(["jquery-1.12.1.min", "knockout-3.4.0", "materialize.min", "pouchdb-5.3.0.min"], function($, ko) { //My main functions and other stuff ... }

我的索引有以下内容:

<script data-main="js/main" src="js/lib/require.js"></script>
<script type="text/javascript" src="js/converter.js"></script>

但似乎我的Jquery , KO , materialize.css和 pouchdb没有像我在网络中的 chrome 开发工具上看到的那样加载:

我还阅读了有关如何设置依赖项的垫片配置，我希望它们按此顺序排列。我真的不知道我错过了什么，非常感谢任何帮助。

文件夹结构是:

js:  
   lib:
     ->jquery-1.12.1.min.js
     ->knockout-3.4.0.js
     ->pouchdb-5.3.0.min.js
     ->materialize.min.js 
     ->require.js 
   main.js
   converter.js

Answer 1

好的，看来 require 和 materialze.css 与 hammer.js 有问题，我建议你去下载 Hammer.min.js并将其包含在您的 lib 文件夹中。然后在您的 main.js 中添加以下内容:

requirejs.config({
    baseUrl: 'js/lib',
    waitSeconds: 0,
    paths: {
        app: '../app',
        jquery: 'jquery-1.12.1.min',
        materialize: 'materialize.min',
        knockout: 'knockout-3.4.0',
        pouchdb: 'pouchdb-5.3.0.min',
        hammer: 'hammer.min'
    },
    shim: {
        hammer: {
            deps: ['jquery']
        },
        pouchdb: {
            deps: ['jquery']
        },
        knockout: {
            deps: ['jquery'],
            exports: 'ko'
        },
        materialize: {
            deps: ['jquery', 'hammer'],
        },
        jquery: {
            exports: '$'
        }
    }
});

你包括你的 hammer 以及 jquery 对它的依赖。我看到您没有将 PouchDb 对象放入函数中:

define(["jquery", "knockout", "pouchdb", "materialize"], function($, ko, PouchDB) {...

希望对你有帮助