javascript - 用Rails webpacker导入Gem的javascript文件夹rails-erb-loader

Question

我正在尝试使用 Rails 6 webpacker 从 gem 的文件夹中导入 javascript。我见过每次导入仅使用 1 个文件完成此操作。是否可以抓取所有带有 *.js 扩展名的文件作为 gem？

javascript/packs/application.js.erb

import "<%= File.read(File.join(Gem.loaded_specs['active_storage_drag_and_drop'].full_gem_path, 'lib', 'assets', 'javascripts', 'active_storage_drag_and_drop/*.js')) %>";

错误

(erb):17:in `read': No such file or directory @ rb_sysopen -/home/user.../active_storage_drag_and_drop../assets/javascript/active_storage_drag_and_drop/index.js

Answer 1

此软件包可在 NPM 上获取:https://www.npmjs.com/package/active_storage_drag_and_drop

我会这样做:

yarn add active_storage_drag_and_drop

然后在你的 Webpack js 文件中:

import * as ActiveStorageDragAndDrop from "active_storage_drag_and_drop"
window.ActiveStorageDragAndDrop = ActiveStorageDragAndDrop // needed as of v1.0.3

https://github.com/rossta/rails6-webpacker-demo/commit/ce1e8eb991b681574bdb7ce0ef33ae4e34b61dfd#diff-c0a98e77a42efd669302853444d5c362

我已经在 https://github.com/rossta/rails6-webpacker-demo/tree/example/active_storage_drag_and_drop 的分支中创建了一个工作演示。

Because the package's JS source makes assumptions about globals as of v1.0.3, assigning the imported var in your project JS appears to be necessary until the package is updated.

对于基于 Ruby 的依赖项，您可能仍然需要 Gemfile 中的 gem。

一般来说，我不建议尝试通过 ERB 中的 gem 路径查找 Ruby gems 提供的 javascript 依赖项。迁移到 Webpack/Webpacker 的优点之一是，您应该尽可能利用 NPM 来处理依赖项。