将requirejs模块连接成单个文件

Question

我正在尝试将所有需要的模块和一些文本模板连接成一个连接和uglified main.min.js,所以我可以在我的HTML中包含该文件.

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

我在github上创建了一个裸骨项目,以重现问题.

文件结构:

• main.js
• 的index.html
• log.js
• 建立生产
• LIB/require.js
• node_modules /要求/斌/ 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');
});

集结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

我刚看了你的代码.

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

<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>

编辑:虽然外部需要加载缩小文件(包含所有模块),但您还需要第二个嵌套需求来加载仍称为main的实际模块.

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

• 入口点:myApp
• compiled(optimize: 'none'):main
• compiled(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.

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

name: 'main.js'

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

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

(这种随机的想法没有保修.)