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>