时间戳

首页 > 解决方案 > 使用 webpack 和 encore 在 symfony 4.2.9 中使用 toastr

symfony - 使用 webpack 和 encore 在 symfony 4.2.9 中使用 toastr

问题描述

我正在尝试使用 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

标签： symfonytoastrwebpack-encore

解决方案

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

在 webpack.config.js 中，CSS ：

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

在 app.js 中，导入行：

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

我可能错过了一些东西，并希望以正确的方式去做。即使它正在工作，这个也可能是错误的，所以我仍在阅读好的解决方案。

推荐阅读