将requirejs模块连接到单个文件中

Question

我正在尝试将我所有的需求模块和一些文本模板连接到一个连接和丑化的 main.min.js 中，以便我可以将该文件包含在我的 HTML 中。

我想出了连接和丑化部分。但是，我无法在浏览器中实际运行任何代码。

我创建了一个bare-bone project on github，以重现该问题。

文件结构：

• main.js
• index.html
• log.js
• 构建-生产
• lib/require.js
• node_modules/require/bin/r.js

我使用构建文件 build-production 连接 main.js、log.js 和 require.js：

./node_modules/requirejs/bin/r.js -o build-production.js

main.js

require.config({
    paths: {
        requireLib : 'lib/require/require'
    },
    waitSeconds: 1000
});

console.log('loading main.js');

define(function(require) {
    var log = require('log');
    console.log('loaded')

    log.fine('main loaded');
});

build-production.js：

({
    mainConfigFile : 'main.js',
    include : [ 'requireLib' ],
    name : 'main.js',
    out : 'main.min.js' })

index.html:

<script src="main.min.js" type="text/javascript"></script>

所以浏览器中的 index.html 应该打印出来

加载 main.js
加载 加载主

但它只打印出第一行

加载 main.js

谁知道，为什么会这样？

Answer 1

聚会迟到了，但我认为这对其可能正在寻找类似解决方案的其他人有用。我决定在这里发帖以供记录。

还有browserify 可以满足您的需求。它的用法类似于 require（在 npm 上），但您可以在浏览器端使用它。我发现它很有用。

Answer 2

我刚刚仔细查看了您的代码。

我不确定您为什么要使用以下方式加载缩小文件：

<script src="main.min.js" type="text/javascript"></script>

它仍然是一个 AMD 模块，因此需要使用 AMD 加载程序加载（否则 define 不会得到处理）。

这行得通：

<script type="text/javascript" src="lib/require/require.js"></script>
<script type="text/javascript">
    require(['main.min'], function () {
        require(['main'], function () {});
    });
</script>

编辑：虽然外部 require 加载到缩小文件（包含所有模块）中，但您还需要第二个嵌套的 require 来加载仍称为 main的实际模块>.

将单个模块命名为main，然后将所有模块的缩小版本命名为main.min，这是非常具有误导性的。例如，我可能希望 main 与 main.min 完全相同，但没有应用任何优化。您可以考虑重命名为：

• 入口点：myApp
• 编译 (optimize: 'none'): main
• 已编译 (optimize: 'uglify2')：main.min

编辑 2： 在您的构建文件中：

name: 'main.js' → name: 'main'

这将使 requirejs 将该模块命名为 main：

define('main.js', ...); → define('main', ...);

现在：require(['main']) 在已编译文件的本地范围内查找（并加载）名为 main 的模块。

之前：require(['main']) 没有找到名为 main 的模块（它被命名为 main.js），因此将其视为文件名并加载 ./main.js .

Edit 3：替代Edit 2，您可以在构建文件中保留：

name: 'main.js'

并为构建配置或运行时配置添加路径别名：

paths: { 'main' : 'main.js' }

（这种随意的想法没有任何保证。）