如何使用NPM安装的Toastify.js？我得到“无法解决模块指定符”。

Question

我试图使用Toastify-js，这是用于吐司类型消息的库，使用NPM安装。 在文档中，运行安装COMAND后，它说：

-Import toastify-js进入模块以开始使用它。 从“ toastify-js”

导入吐司

但是当我在代码中插入该导入行时，我会收到此消息：

unturew typeError：无法解析模块指定符“ toastify-js”。 相对引用必须以“/”，“ ./”或“ ../” ../ p>开始

我认为我可能没有理解的东西...我应该把那条线放在哪里？或我在做错什么。文档是否假设使用我不知道的NPM安装的库，也许？

Answer 1

我知道回答有点晚了，但我自己现在就发现了。为了通过在Laravel Blade文件中通过NPM安装toastify-js，首先必须编译一个由导入烤面包的JavaScript文件。

首先，安装toastify-js。

npm install --save toastify-js

并在JavaScript文件中导入烤面包和CSS。对我来说，我只是使用默认的app.js

resources/js/app.js

import Toastify from 'toastify-js'
import "toastify-js/src/toastify.css"

window.Toastify = Toastify;

，然后我们必须在vite.config.js中编译“ app.js”文件。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

汇编后，我们可以通过刀片文件中的Vite Blade指令链接App.js文件。您可以将指令放在关闭的主体标签之前或您想要的任何地方。

 @vite('resources/js/app.js')

然后，刀片文件中的任何地方都可以写脚本以显示烤面包。

<script type="module">
        Toastify({
            text: "Hello, I am toasted!!",
            duration: 3000,
            destination: "",
            newWindow: true,
            close: true,
            gravity: "bottom", // `top` or `bottom`
            position: "right", // `left`, `center` or `right`
            stopOnFocus: true, // Prevents dismissing of toast on hover
            style: {
                background: "linear-gradient(to right, #00b09b, #96c93d)",
            },
            onClick: function() {} // Callback after click
        }).showToast();
    </script>

还要确保脚本标签具有“模块”的类型。否则，烤面包不会出现。

希望您可以按照这些步骤以相同的方式显示烤面包。请告诉我，如果我有任何我应该知道的要修复或改善此方法的东西。

另外，要知道如何更好地自定义吐司，请确保阅读Toastify-JS文档。