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

Question

我正在尝试将JS 路由 gem与Rails 5.1 中的webpacker一起使用，但不知道如何js-routes.js.erb在 webpack 的app/javascript/packs/application.js.

import 'js-routes'

导致

Uncaught Error: Cannot find module "js-routes"

这可能意味着 webpack 无法在包含的 gem 中找到 javascript。这可能与这个webpacker 的 github 问题有关。

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

谢谢！

Answer 1

使用 JsRoutes 文档的高级设置部分中描述的技术：

// 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 only dev 进程，你可以

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

2. 添加

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

3. 将它们引用为import routes from './routes.js'

4. 在任何路由更改后重新生成它rake js:routes

Answer 3

如果您正在使用webpacker，您可能想要签出js_from_routes，它不需要高级设置，因为它是为import基于 - 的设置而设计的。

对于您想从 JS 访问的每个端点，它将生成一个方法，可以帮助您构建 URL或发出请求。

resources :video_clips, export: true

通过将它与 结合使用axios，这些生成的助手可以方便且易于使用：

import VideoClipsRequests from '@requests/VideoClipsRequests'

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

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

好处：

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