使用webpack和encore在symfony 4.2.9中使用Toastr

Question

我正在尝试使用Webpack / Encore将Toastr库添加到我的项目中，但是我无法使其工作。

我正在使用Yarn来管理node_modules /

中的库

在我的app.js中，我有：

$(() =>
{
    toastr.info("test");
});

我尝试了

1. 在我的代码之前简单导入app.js

   import "toastr";
   

  

未捕获的ReferenceError：未定义Toastr

1. 我在搜索问题时发现了另一个导入

   import * as toastr from 'toastr';
   import '../../node_modules/toastr/build/toastr.min.css'; 
   

  

这是一项工作，但看起来CSS并非如此：弹出窗口是透明的，只有边框

1. 在webpack.config.js中添加提供变量

   .autoProvideVariables({
           "window.toastr": require.resolve("toastr")
   })
   

  

未捕获的ReferenceError：未定义Toastr

1. 在webpack.config.js中添加条目

   .addEntry('toastr', [
       './node_modules/toastr/build/toastr.min.js',
       './node_modules/toastr/build/toastr.min.css'
   ])
   

  

未捕获的ReferenceError：未定义Toastr

Answer 1

我设法使它以这种奇怪的方式工作

在webpack.config.js中，CSS：

.addEntry('toastr', [
    './node_modules/toastr/build/toastr.min.css'
])

在app.js中，导入行：

import * as toastrlib from 'toastr';
$(() =>
{
    toastrlib.info("test");
});

我可能错过了一些东西，想以正确的方式做。即使正在运行，这可能也是一个错误的选择，因此我仍在寻找一种好的解决方案。

Answer 2

就我而言

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

在app.js文件的开头就足够了。

我认为，当我们使用import "toastr"或require('toastr')的javascript解释器时，会将'toastr'文件夹视为toastr文件。

所以我们在指向文件时应该更加精确。