首页 > 解决方案 > Rails 6 网络打包程序。Js插件不起作用

问题描述

我正在使用 Rails 6。我无法让 js 插件正常工作。我正在尝试添加 toastr.js。

这是我尝试过的

yarn add toastr

这就是我的 application.js 文件的外观

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('bootstrap')
require("jquery-ui")
require("packs/adminlte")
require("bootstrap-datepicker")
require("toastr/toastr")

这就是我的 environment.js 文件的样子

const { environment } = require('@rails/webpacker');

const webpack = require('webpack');

environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}));

module.exports = environment;

toastr/toastr如果我在浏览器控制台中使用 cdn 或在(节点模块)处运行 js 代码,一切正常。

我错过了什么?

标签: javascriptruby-on-railswebpackruby-on-rails-6

解决方案


按照以下步骤在带有 webpacker 的 rails 应用程序中使用 toastr JS:

  • 用纱线添加烤面包机:yarn add toastr

  • 在您的 application.js 中:

    import toastr from 'toastr';
    
    toastr.options = {
        "closeButton": true
        .... add options here ...
     };
    
    global.toastr = toastr;
    

或者

toastr = require("toastr")

或者

import toastr from 'toastr/toastr';

推荐阅读