webpacker: 包括来自 gem (js-routes) 的 javascript

Question

我正在尝试使用 Rails 5.1 中的 JS routes gem with webpacker，但不知道如何在 webpack 的 app/javascript/packs/application.js.[=18 中包含 js-routes.js.erb =]

import 'js-routes'

导致

Uncaught Error: Cannot find module "js-routes"

这可能意味着 webpack 无法在包含的 gem 中找到 javascript。这可能与此有关 webpacker's github issue.

目前此问题的最佳解决方法是什么？

谢谢！

Answer 1

使用 JsRoutes 文档 very advanced setup 部分中描述的技术：

// app/javascript/routes.js.erb

<%= JsRoutes.generate %>
export default this.Routes

然后在您的应用程序包中：

// app/javascript/packs/application.js

import Routes from '../routes.js.erb'
// Note the .erb extension!

// If you want it to be available globally for some reason:
window.Routes = Routes

Answer 2

如果你想要更多的纯js开发进程，你可以

使用内置任务预先生成 app/assets/javascripts/routes.js rake js:routes

添加到

# config/webpacker.yml 
...
resolved_paths: ['app/assets/javascripts']
...

将它们引用为 import routes from './routes.js'
在使用 rake js:routes

Answer 3

如果您使用的是 webpacker, you might want to check out js_from_routes，它不需要高级设置，因为它专为基于 import 的设置而设计。

对于您想从 JS 访问的每个端点，它将 generate a method that can help you build a URL 或发出请求。

resources :video_clips, export: true

通过使用它in combination with axios，这些生成的助手可以方便易用：

import VideoClipsRequests from '@requests/VideoClipsRequests'

VideoClipsRequests.update({ data: video })
  .then(onVideoUpdate)

请记住，您可以通过提供 自定义 模板来调整生成的代码。

好处：

轻松指定应生成助手的路由。
无需手动指定URL，防止出错，节省开发时间。
与 tree-shaking 配合得很好，未使用的助手不包含在编译包中。

webpacker: 包括来自 gem (js-routes) 的 javascript

webpacker: including javascript from a gem (js-routes)

javascript

ruby-on-rails

js-routes

webpack

webpacker