javascript - 将 requirejs 模块连接成单个文件

Question

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

我弄清楚了串联和丑化部分。但是，那时我无法在浏览器中实际运行任何代码。

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

文件结构:

• main.js
• index.html
• 日志.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

主要.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');
});

构建生产.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 应该打印出来

loading main.js
loaded loaded main

但它只打印出第一行

loading main.js

谁知道，为什么会这样？

Answer 1

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

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

<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
• 已编译(优化:'none'):main
• 已编译(优化:'uglify2'):main.min

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

名称:'main.js' → 名称:'main'

这将使 requirejs 将模块命名为main:

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

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

之前:require(['main']) 没有找到名为 main 的模块(它被命名为 main.js)所以将其视为文件名并加载 ./main.js.

编辑 3:或者 编辑 2，在您的构建文件中您可以保留:

名称:'main.js'

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

路径:{ 'main' : 'main.js' }

(这个随机的想法没有任何保证。)