使用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开发工具中看到的那样加载：

我还读到了关于shim配置如何设置依赖关系，我希望它们按顺序排列。我真的不知道自己错过了什么，真的很感激任何帮助。

文件夹结构是：

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

使用path，requirejs将模块ID前缀（config中的名称）替换为相应的值。

使用shim，您可以导出全局变量并配置依赖项（materialize依赖于jquery，因此您必须在导入materialize.js之前导入jQuery）

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

require(["jquery", "knockout", "materialize", "pouchdb"], function ($, ko) {
    console.log($);
    console.log(ko);
});

Answer 2

好吧似乎要求和materialze.css有一个hammer.js的问题，我建议您去下载Hammer.min.js并将其包含在您的lib文件夹中。 然后在你的main.js中添加以下内容：

copy:{
        test:{
            files:[
                { 
                    src: '/static/**',
                    dest: '/test/'
                }
              ]
        }
}

你包括锤子以及jquery对它的依赖。我发现你没有把PouchDb对象放在函数中：

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: '$' } } });

希望这有帮助