Question

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

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

文件结构：

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

积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
已编译（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 ），因此将其视为文件名并加载{ {1}}。

修改3：或编辑2 ，在您的构建文件中可以保留：

./main.js

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

name: 'main.js'

（这种随机的想法没有保修。）

Answer 2

晚会，但我认为这对其他可能正在寻找类似解决方案的人有用。我决定在这里发帖以便进行记录。

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

将requirejs模块连接成单个文件

2 个答案: