Laravel 9 - 在Blade模板中使用Vite进行JS导入

Question

我正在尝试使用Vite和Laravel 9，但是没有前端框架（如Vue或React）。

我正在尝试创建一个可重用的js模块，可以在不同的Blade模板中使用/加载。

因此，我在“resources/js/components/utilities”中创建了一个名为“menu-btn-toggle.js”的文件。

export class MenuBtnToggle
{
    constructor() {
        console.log('MenuBtnToggle');
    }
}

我在 'resources/js/components' 中创建了一个 'utilities.js' 文件。

import './utilities/menu-btn-toggle';

我随后更新了 'resources/js' 目录下的 'app.js' 文件。

import './bootstrap';
import './components/utilities';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

到目前为止，这似乎正在起作用(?)。至少我是这么认为的。Vite到目前为止没有给我任何错误(yay!)。

但是当我尝试在一个blade模板中导入这个模块时，我无法让它工作。 因此，在我的blade模板底部添加了这个：

<script type="module">
    import MenuBtnToggle from 'menu-btn-toggle';

    new MenuBtnToggle();
</script>

但是这会给我以下错误：

未捕获的类型错误：解析模块规范符“menu-btn-toggle”时出错。相对模块规范符必须以“./”、“../”或“/”开头。

但是当我添加其中一个示例时，错误会更改为：

由于不允许的MIME类型（“text/html”），因此已阻止从“[local_dev_url]/menu-btn-toggle”加载模块。

因为它无法找到该模块。 它返回404。

没有前端框架，我是否可以做到我想要的？ 或者我没有看到明显的东西？ 我有php经验，不幸的是没有足够的Laravel和Vite经验。

- DijkeMark

Answer 1

如果你正在使用Laravel，那么这个方法可以实现：

import { helper_fn } from "{{ Vite::asset('resources/js/helpers.js') }}" 

但它会打印整个URL，这似乎有点过头了。但是我无法使用别名或相对路径使其正常工作。而且，这也无法与不支持import的旧版浏览器兼容。

- Valentino

Answer 2

我曾经陷入了一个几乎相同的困境，即我们无法在使用Vite时在blade文件中使用import语句。我们通常会遇到以下错误：

Uncaught TypeError: Error resolving module specifier “menu-btn-toggle”. Relative module specifiers must start with “./”, “../” or “/”.

或者我们会遇到404阻止错误，几乎与以下错误相同：

Loading module from “[local_dev_url]/menu-btn-toggle” was blocked because of a disallowed MIME type (“text/html”).

当导入外部npm包或模块时，我们需要将它们放在windows对象中，就像您上面为Alpine所做的那样。

window.Alpine = Alpine;

但是针对您的特定问题，您必须执行以下操作：

1）在menu-btn-toggle.js文件中进行如下操作

export class MenuBtnToggle
{
    constructor() {
        console.log('MenuBtnToggle');
    }
}

2) 在 utilities.js 内部

import {MenuBtnToggle} from "./utilities/menu-btn-toggle";
window.MenuBtnToggle = MenuBtnToggle;

3. 最后，在您的app.js中

   import './components/utilities';

4. 现在在您的.blade文件中，无需导入MenuBtnToggle，只需这样做

   new MenuBtnToggle();

无需在blade中使用import MenuBtnToggle from 'menu-btn-toggle';。重要的是通过vite正确地导入您的app.js文件到.blade文件中。

@vite(['resources/css/app.css','resources/js/app.js'])

它可以工作。在复制您的文件/设置时，它已经成功运行。

- DaniyalGondal

---

但是这种方式，你必须在app.js中导入所有的小模块，并且它们会被所有页面一直导入，这违背了拥有小模块的初衷。 - Valentino

Answer 3

如果你只有一个函数：

在 resources/js/components/utilities/menu-btn-toggle.js 中：

function MenuBtnToggle
{
    console.log('MenuBtnToggle');
}

window.MenuBtnToggle = MenuBtnToggle;

如果您没有定义window.MenuBtnToggle行，您可以在控制台中看到以下错误：
Uncaught ReferenceError: MenuBtnToggle is not defined

位于resources/view/myView.blade.php：

@section(…)

@vite('resources/js/components/utilies/menu-btn-toggle.js')
//… you can now call you js function

- bcag2

Answer 4

我的问题是在blade文件内的脚本中调用一个对象方法。

解决方法如下。

在app.js内实现。

import {My_object} from "./My_object.js";
window.My_object = My_object;

物体内部：

export var My_object = {
    /**
    * Something
    **/
}

谢谢大家。

- Luca Scandroglio