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

concatenate requirejs modules into single file

提问by forste

I'm trying to concatenate all my requires modules and a few text templates into a single concatenated and uglified main.min.js, so I can include that file in my HTML.

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

I figured out concatenation and uglifying part. However, I am not able to actually run any code in the browser then.

我想出了串联和丑陋的部分。但是，那时我无法在浏览器中实际运行任何代码。

I created a bare-bone project on github, to reproduce the problem.

我在 github 上创建了一个简单的项目，以重现该问题。

File structure:

文件结构：

• main.js
• index.html
• log.js
• build-production
• lib/require.js
• node_modules/require/bin/r.js

• 主文件
• 索引.html
• 日志文件
• 建造生产
• 库/require.js
• node_modules/require/bin/r.js

I concatenate main.js, log.js and require.js using the build file build-production:

我使用构建文件 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:

构建production.js：

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

index.html:

索引.html：

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

so index.html in a browser should print out

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

loading main.js
loaded loaded main

加载 main.js
加载加载 main

but it only prints out the first line

但它只打印出第一行

loading main.js

加载 main.js

anybody knows, why that is the case?

有谁知道，为什么会这样？

采纳答案by c24w

I've just had a closer look at your code.

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

I'm not sure why you're loading in the minified file using:

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

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

It's still an AMDmodule, hence needs to be loaded in using an AMD loader (otherwise the definedoesn't get handled).

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

This works:

这有效：

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

Edit:whilst the outer require loads in the minified file (containing all modules), you also need a second, nested require to load the actual module still known as main.

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

It's quite misleading having a single module named mainand then a minified version of all modules named main.min. For example, I might expect mainto be exactly the same as main.min, but without any optimisations applied. You may consider renaming to something like:

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

• entry-point: myApp
• compiled (optimize: 'none'): main
• compiled (optimize: 'uglify2'): main.min

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

Edit 2:in your build file:

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

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

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

That will make requirejs name that module maininstead:

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

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

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

Now: require(['main'])finds (and loads) the module named mainin the local scope of the compiled file.

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

Before: require(['main'])didn't find a module named main(it was named main.js) so treats it as a file name and loads ./main.js.

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

Edit 3:alternatively to Edit 2, in your build file you could retain:

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

name: 'main.js'

name: 'main.js'

and add a path alias to either the build config or the run-time config:

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

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

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

(This random thought comes with no warranty.)

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

回答by Alp

Late to the party, but I thought it would be useful for others, who might be looking for a similar solution. And I decided to post here for documentation purposes.

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

There is also browserifythat does exactly what you are looking for. Its use is similar to require(on npm) but you can use it on the browser side. I found it useful.

还有browserify已经做了你正在寻找什么。它的使用类似于require（在 npm 上），但您可以在浏览器端使用它。我发现它很有用。