RequireJs + Rails 4

Question

我是 RequireJs 的新手，所以我有点坚持让我的 rails 4 应用程序使用 requirejs 片段进行生产。

我有以下几点：

1) Require_rails gem

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。基于Troubleshooting section in requirejs-rails Readme，您不应在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 将使用modulesconfig 作为 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>