RequireJs + Rails 4

Question

我是RequireJs的新手，所以我有點想讓我的rails 4應用程序使用requirejs進行生產。

我有以下內容：

1）Require_rails寶石

gem 'requirejs-rails'

2）在html.erb文件中間調用的require-js

<%= requirejs_include_tag asset_url("scribe/scribe-editor.js") %>

3）在這個文件中，我有以下內容

require({
  paths: {
    'scribe': 'scribe/bower_components/scribe/scribe',
    'scribe-plugin-blockquote-command': 'scribe/bower_components/scribe-plugin-blockquote-command/scribe-plugin-blockquote-command',
    'scribe-plugin-code-command': 'scribe/bower_components/scribe-plugin-code-command/scribe-plugin-code-command'
  }
}, [
  'scribe',
  'scribe-plugin-blockquote-command',
  'scribe-plugin-code-command',
], function (
  Scribe,
  scribePluginBlockquoteCommand,
  scribePluginCodeCommand,
) {
...
});

4）所有這些文件都位於vendor / javascripts / scribe中

vendor/javascripts/scribe/scribe-editor.js
vendor/javascripts/scribe/bower_components/scribe/scribe.js
vendor/javascripts/scribe/bower_components/scribe/scribe/scribe-plugin-blockquote-command/scribe-plugin-blockquote-command.js
vendor/javascripts/scribe/bower_components/scribe/scribe-plugin-code-command/scribe-plugin-code-command.js

5）在生產中，我有以下代碼。

<script src="/assets/require-21be67676bcf2b75c547dd382d849e26.js"></script>
<script>require.config({"baseUrl":"http://domain.com/assets","paths":{"application":"/assets/application-e720d39c2f6b94f1fd554d97b48ee312"}}); require(["http://domain.com/assets/scribe/scribe-editor-a848a8a552e89e8a8f6e9a62d10cd58f.js"]);</script>

6）最后，我的asset.rb文件：

Rails.application.config.assets.precompile += %w( 
    scribe/scribe-editor.js
)

============= 7）問題：腳本編輯器已加載，但未找到所有依賴項和404。

謝謝你的幫助。

Answer 1

我還沒有在Rails 4中使用requirejs-rails，只是在Rails 3.2中使用，但我認為它的工作原理基本相同。

我認為獲取依賴項的那些404的原因是因為r.js從未在scribe/scribe-editor運行，而是在application.js上運行，這就是為什么您在生產代碼中看到/assets/application-e720d39c2f6b94f1fd554d97b48ee312 。

我看到的第一個問題是您正在使用config.assets.precompile 。 根據requirejs-rails自述文件中的“ 疑難解答”部分，您不應在config.assets.precompile包含requirejs模塊，因為這會使rails嘗試使用鏈輪對其進行預編譯。 您希望r.js優化任何requirejs模塊。 Requirejs-rails將在預編譯步驟中為您運行r.js。 在我的項目中，我使用config.assets.precompile編譯css，這是一個不是requirejs模塊的Javascript。 例如，就我而言，application.js不是requirejs模塊（在您的情況下也是如此）。

您沒有提及項目中是否有requirejs.yml文件。 如果不是，我建議您添加一個，然后將requirejs配置移到那里，而不是將其添加到scribe-editor.js模塊的頭部。

requrejs.yml：

modules:
   - name: scribe/scribe-editor
paths:
   scribe: scribe/bower_components/scribe/scribe
   scribe-plugin-blockquote-command: scribe/bower_components/scribe-plugin-blockquote-command/scribe-plugin-blockquote-command
   scribe-plugin-code-command: scribe/bower_components/scribe-plugin-code-command/scribe-plugin-code-command

RequireJS-Rails將使用modules配置作為r.js構建配置的一部分，以指示需要通過r.js運行哪些文件。

RequireJS-Rails會將路徑轉換為Javascript，並將其作為<script>標記添加到require.js腳本標記（不包括模塊內容）之前，作為requirejs.config。 可以將requirejs配置中的所有內容添加到requirejs.yml

然后，您可以將scribe-editor模塊定義更改為以下內容：

define(['scribe', 'scribe-plugin-blockquote-command', 'scribe-plugin-code-command'], 
       function( Scribe, scribePluginBlockquoteCommand, scribePluginCodeCommand) {
...
});

最后，我認為您不需要在requirejs_include_tag的asset_url()調用，您需要引用requirejs模塊。 像<%= requirejs_include_tag('scribe/scribe-editor') %>應該可以工作。

由於requirejs_include_tag的結果，您應該最終在生產中的響應中添加2個script標簽。 如果我猜對了，它應該看起來像這樣（SHA剛由我組成）：

<script>var require = {"baseUrl":"/assets","paths":{"scribe/scribe-editor":"/assets/scribe/scribe-editor-c48f6b842cf0f40976393a1d2f4568e0"}};</script>
<script data-main="scribe/scribe-editor-c48f6b842cf0f40976393a1d2f4568e0" src="/assets/require-cbfc3f690e2109e37e09aefd8fe40332.js"></script>