如何在 Rails 6 应用程序中使用 Gem 的 js 文件答案

【问题标题】：how to use js files from Gem in rails 6 application如何在 Rails 6 应用程序中使用 Gem 的 js 文件
【发布时间】：2019-12-08 00:58:34
【问题描述】：

所以我使用 Rails 已经有一段时间了。但是在使用 Rails 6 时，我真的很难动起来。我有一些用于资产和事物的自定义 gem，但我不知道如何加载 js 文件。

我习惯了

应用程序.js

//= require activestorage
//= require jquery-3.3.1.min
//= require popper.min
//= require bootstrap
//= require mdb
//= require wysiwyg
//= require addons/pickr.min
//= require modules/buttons
//= require modules/cards
//= require modules/waves
//= require activestorage
//= require turbolinks
//= require_tree .

但这不会在带有 Webpacker 的 Rails 6 中加载。我无法在网上找到一个基本解决方案，它不涉及将多个 js 文件和代码行添加到应用程序以一起修补解决方案。我所做的尝试是

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require ("jquery-3.3.1.min").start()
require ("popper.min").start()
require ("bootstrap").start()
require ("mdb").start()
require ("wysiwyg").start()
require ("addons/pickr.min").start()
require ("modules/buttons").start()
require ("modules/cards").start()
require ("modules/waves").start()
require("@rails/activestorage").start()
require("channels")

资产位于 gem 中的正确位置（因此 rails 5 应用程序中的第一个版本确实会按预期加载所有内容）。我可以用纱线添加其中的一些，但我想使用 gem 中的实际文件，而不仅仅是让引导程序工作，有没有直接的解决方案？我也尝试调整require 中的路径，但也没有用。

感谢您的帮助！

【问题讨论】：

相关 JavaScript 文件的位置是什么？我假设第一个 sn-p 在 app/assets/javascripts/application.js 中，而第二个在 app/javascript/packs/application.js 中我是否正确假设？
是的，那是 sn-ps 的位置，对不起，我应该标记的。要包含的 js 文件位于 gem 中，位置在 /vendor/assets/javascripts/*

标签： ruby-on-rails webpacker ruby-on-rails-6

【解决方案1】：

需要通过 gem 导入 js 文件。也许这可以帮助你：

import jQuery from 'jquery'

<%= File.read(File.join(Gem.loaded_specs['bla_bla_gem'].full_gem_path, 'lib', 'assets', 'javascripts', 'bla_bla.js')) %>

Related issue comment

【讨论】：

【解决方案2】：

所以要在 rails 6 中回答，您会注意到 javascript 文件夹 app/javascript 的使用，这意味着您对 JS 所做的任何事情都应该从那里完成。这些对宝石的依赖现在已降至最低，并被纱线取代。

我会给你一个我使用 js 库的过程的例子。例如，我将使用纱线调用引导程序。我已包含自定义文件以帮助您调用每个库。

这是我喜欢使用的一个过程，我已经根据我不久前在媒体上阅读的内容进行了修改

# app/javascript/packs/application.js
import '../stylesheets/application'


# app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
in the console run

yarn add bootstrap@4.3.1 jquery popper.js

然后

# config/webpack/environment.js
...
const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

... 那么

# app/javascript/packs/bootstrap_custom.js
import 'bootstrap/js/dist/alert'
import 'bootstrap/js/dist/button'
import 'bootstrap/js/dist/carousel'
import 'bootstrap/js/dist/collapse'
import 'bootstrap/js/dist/dropdown'
import 'bootstrap/js/dist/index'
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/popover'
import 'bootstrap/js/dist/scrollspy'
import 'bootstrap/js/dist/tab'
import 'bootstrap/js/dist/toast'
import 'bootstrap/js/dist/tooltip'
import 'bootstrap/js/dist/util'

并将其链接到您的 app/javascript/packs/application.js 文件中。

# app/javascript/packs/application.js
import './bootstrap_custom.js'
then

# app/javascript/stylesheets/application.scss
@import './bootstrap_custom.scss'
then

# app/javascript/stylesheets/bootstrap_custom.scss
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';
@import '~bootstrap/scss/_root.scss';
@import '~bootstrap/scss/_reboot.scss';
@import '~bootstrap/scss/_type.scss';
@import '~bootstrap/scss/_alert.scss';
@import '~bootstrap/scss/_badge';
@import '~bootstrap/scss/_breadcrumb';
@import '~bootstrap/scss/_button-group';
@import '~bootstrap/scss/_buttons';
@import '~bootstrap/scss/_buttons.scss';
@import '~bootstrap/scss/_card.scss';
@import '~bootstrap/scss/_carousel.scss';
@import '~bootstrap/scss/_close.scss';
@import '~bootstrap/scss/_code.scss';
@import '~bootstrap/scss/_custom-forms.scss';
@import '~bootstrap/scss/_dropdown.scss';
@import '~bootstrap/scss/_forms.scss';
@import '~bootstrap/scss/_grid.scss';
@import '~bootstrap/scss/_images.scss';
@import '~bootstrap/scss/_input-group.scss';
@import '~bootstrap/scss/_jumbotron.scss';
@import '~bootstrap/scss/_list-group.scss';
@import '~bootstrap/scss/_media.scss';
@import '~bootstrap/scss/_modal.scss';
@import '~bootstrap/scss/_nav.scss';
@import '~bootstrap/scss/_navbar.scss';
@import '~bootstrap/scss/_pagination.scss';
@import '~bootstrap/scss/_popover.scss';
@import '~bootstrap/scss/_print.scss';
@import '~bootstrap/scss/_progress.scss';
@import '~bootstrap/scss/_spinners.scss';
@import '~bootstrap/scss/_tables.scss';
@import '~bootstrap/scss/_toasts.scss';
@import '~bootstrap/scss/_tooltip.scss';
@import '~bootstrap/scss/_transitions.scss';
@import '~bootstrap/scss/_utilities.scss';

如果您选择精确地遵循它，请不要更改 scss 行等它会搞砸

【讨论】：

对，所以问题是如何从 gem 中加载它。您的回答似乎基本上是说将您的 gem 转换为可以使用 yarn 安装的东西，对吗？
我的回答是，在 rails 6 中，js 库的资产管道的处理方式不同，因此添加了 node-modules 文件夹和 stylesheet_pack_tag javascript_pack_tag。我不是专家，但这对我有用……而且我认为它使在项目中实现 JS 变得更加健壮。如果要使用gem，js的时候不要包含pack_tag，回到旧的tag

【解决方案3】：

您需要直接从 gem 文件中获取它们。

将您的 application.js 更改为 application.js.erb 并遵循 demir 解决方案。您也可以使用 next 导入多个文件。

<% ['file_1', 'file_2'].each do |file| %>
 import "<%= File.join(Gem.loaded_specs['my_gem'].full_gem_path, 'app', 'assets', 'javascripts', file) %>";
<% end %>

【讨论】：

使用bin/bundle exec rails webpacker:install:erb为js.erb文件安装webpacker支持见stackoverflow.com/a/64964126/960184
一个问题是对 gem 目录中文件的更改似乎不会自动调用bin/webpackrebuiild；作为更改javascript/packs/application.js.erb 会。更改 gem 目录中的文件时，您必须使用命令 bin/webpack 手动重建 javascript 包。在调试 gem 并更改它的 javascript 时发现了这一点。当然，gem 文件中的这些更改会在部署时被清除，但是在调试时能够灵活地破解代码是很好的。

【解决方案4】：

我认为文件的位置可能会为您的案例带来问题：当你的文件在时，文件应该在app/assets/javascripts/application.js app/javascript/packs/application.js

希望这会对你有所帮助。

【讨论】：