使用RequireJS分离脚本

Question

使用RequireJS分离脚本

3

我最近在开发一个 Web 应用，希望将其分解为模块化的结构。我进行了搜索，并了解到 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

- Muli

2个回答

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

你需要将jquery的依赖项和hammer一起引入，我发现你没有将PouchDb对象放入函数中：

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

希望这可以帮到你。

- FBC

非常感谢，我完全忘记了PouchDb对象，还有提供的代码，现在可以正常工作了 :) - Muli

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NicoD · Accepted Answer

使用path，requirejs将模块id前缀（在配置中的名称）替换为相应的值。

使用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);
});