Question

我正在尝试在Rails中使用webpacker安装Toastr

现在，我正在使用gem 'toastr-rails'的Toastr 但是，请使用yarn add toastr

替换它

如何设置app/javascript/packs/application.js？

这是我的应用程序中的application.js

app/japascript/packs/application.js
import "jquery"
global.$ = require("jquery")

// JS-----
// install by yarn
import 'modaal/dist/js/modaal'
import 'flatpickr/dist/flatpickr'
require("jquery-ui-bundle")

// CSS ------
// install by yarn
import 'flatpickr/dist/flatpickr.min.css';
import 'font-awesome/css/font-awesome.min.css';
import 'jquery/dist/jquery';

import 'stylesheets/application';
import 'javascripts/application';
require.context('../images', true, /\.(png|jpg|jpeg|svg)$/);


$("#login-button").click(function(event){
     event.preventDefault();

    $('form').fadeOut(500);
    $('.wrapper').addClass('form-success');
});


console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

config / initializers / asset.rb 我是否必须在asset.rb中添加一些内容？

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your 
assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths <<             
Rails.root.join('node_modules')

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css     
)

Answer 1

在带有webpacker的Rails应用中使用Toastr：

用纱线安装敬酒：B
在您的application.js中加载lib：

c = Models.objects.select_related('b').select_related('a').get(pk=215)

创建帮助器方法（例如在application_helper.rb文件中）：

django.core.exceptions.FieldError: Invalid field name(s) given in select_related: 'a'. Choices are: b

在布局文件（app / views / layouts / application.html.erb）底部使用它：

yarn add toastr

Answer 2

此建议假设您在Rails应用程序的根目录中有一个node_modules文件夹。

如果您使用以下命令安装了toastr ...

yarn add toastr

然后，yarn将在您的应用程序根目录中自动生成一个node_modules文件夹。首次使用yarn add添加依赖项时，将创建此文件夹。

可能您已经有这个node_modules文件夹，而您看不到它。这是因为默认情况下，rails将此文件夹添加到.gitignore，这使其在某些文件系统中不可见。

您可以通过临时删除node_modules文件内的node_modules行然后刷新文件树来查看是否有.gitignore文件夹。

您现在应该可以看到node_modules文件夹。确认项目中存在此文件夹后，将node_modules重新添加到.gitignore中。

完成此操作后，打开您的config/initializers/assets.rb文件并添加以下行

Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.js']
Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.css']

然后将以下require语句添加到application.js文件

//= require toastr/build/toastr.min

并假设您在css文件中使用.scss扩展名，则应将以下内容添加到application.scss文件中

@import 'toastr/build/toastr.min';

这在我的环境中有效。

请注意，toastr要求在加载jquery之前先加载它。

因此，您应该确保在application.html.erb布局中的<%= javascript_include_tag 'application' %>标记之前包含jquery脚本。

我正在尝试在Rails中使用Webpacker安装Toastr

2 个答案: