使用 require.js 创建 AMD 模块答案

【问题标题】：Creating an AMD module using require.js使用 require.js 创建 AMD 模块
【发布时间】：2012-12-31 00:50:21
【问题描述】：

我有以下功能：

function(){
    add: function(x, y){
        return console.log(x + y);
    }
}

我如何使用require.js define() 作为 AMD（异步模块定义）兼容模块，然后在浏览器中使用它？

我正在寻找一个使用jsfiddle 的示例，以显示它直接在浏览器中工作。

【问题讨论】：

您可能需要检查示例代码的语法
语法有什么问题？
与其回复说你宁愿复制粘贴到 jsbin.com，例如，自己看看

标签： requirejs amd

【解决方案1】：

如果没有依赖：

test.js：

define(function(){
    return {
       add: function(x, y){
           return console.log(x + y);
       }
    };
});

有依赖关系

define(['dep1', 'dep2'], function(dep1, dep2) {
    return {
       add: function(x, y){
           return console.log(x + y);
       }
    };
});

这是require 的示例。

要引用模块，请使用 require:

bootstrap.js：

/*global define, require */

require.config({
    baseUrl: 'js'
});
require(['test'], function (test) {
    'use strict';

    test.add(4, 5);
});

我的文件夹结构：

root（又名公共）
- js
  - bootstrap.js
  - test.js
- 库
  - 需要
    - require.js
- index.html

在html页面中（jade中，html中类似）：

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

【讨论】：

如果我尝试在 jsfiddle 中运行您的第一个示例，require.js 会给出错误 Uncaught Error: Mismatched anonymous define() module?
您的代码由于引用仍然会在 jsfiddle 中引发错误。如果您在上面看到我的回答，如果您直接在网络上定义一个模块，它不能是匿名的，它需要有一个名称:)
很奇怪，因为我在本地网络服务器上尝试过（但不是在 jsFiddle 中）
您的文件夹/文件结构是什么样的？我无法让它在我的本地网络服务器上运行
是的，可行:) 感谢您的清晰说明。我认为这在网上不起作用的唯一原因是因为 jsfiddle 不会将示例存储为文件，并且 requirejs 会为匿名模块寻找文件结构

【解决方案2】：

在浏览器中直接定义AMD模块时，模块不能匿名，必须有名字，否则require.js会抛出错误Uncaught Error: Mismatched anonymous define() module。

如果您使用 r.js 优化器，您可以定义匿名 AMD 模块，并且 r.js 将处理模块名称。这是为了避免模块名称冲突。

// Define a module (export)
define('a', {
    add: function(x, y){
         return console.log(x + y);
     }
});

// Use the module (import)
require(['a'], function(a){
    a.add(1, 2);
});

require(['a'], function(a){
    a.add(4, 6);
});

这里是jsfiddle example。

【讨论】：