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.根据requirejs-rails自述文件中的疑难解答部分,您不应该包含requirejs模块,config.assets.precompile因为这会使rails尝试使用sprockets对其进行预编译.您希望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) {
...
});

最后我不认为你想要asset_url()调用requirejs_include_tag,你需要引用requirejs模块.有点像<%= requirejs_include_tag('scribe/scribe-editor') %>应该工作.

您应该最终script在生产中添加2个标签作为结果requirejs_include_tag.如果我猜对了,它应该看起来很像这样(我刚刚组成的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>