將requirejs模塊連接成單個文件

Question

我試圖將我所有的需求模塊和幾個文本模板連接成一個連接和uglified的main.min.js，所以我可以將該文件包含在我的HTML中。

我想出了連接和uglifying部分。但是，我無法在瀏覽器中實際運行任何代碼。

我創建了一個bare-bone project on github，重現此問題。

文件結構：

• main.js
• 的index.html
• log.js
• 構建生產
• 的lib/require.js
• node_modules /要求/箱/r.js

我串連使用構建文件構建生產main.js，log.js和require.js：

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

main.js

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

所以指數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.min所有模塊的縮小版本，非常容易引起誤解。例如，我可能預計主要與main.min完全相同，但未應用任何優化。您可以考慮重命名爲這樣的：

• 入口點：對myApp
• 編譯（optimize: 'none'）：主要
• 編譯（optimize: 'uglify2'）：main.min

編輯2：在您的構建文件中：

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

這將使requirejs名稱模塊主要代替：

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

現在：require(['main'])的發現（和負載）命名模塊主要在當地編譯文件的範圍。

之前：require(['main'])沒有找到一個名爲模塊主要（它被命名爲main.js），以便把它當作一個文件名並加載./main.js。

編輯3：或者到編輯2，在生成文件中，你可以保留：

name: 'main.js'

和路徑別名添加到任何生成的配置或運行時配置：

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

（本隨筆附帶任何擔保。）