Laravel 9 - 使用 vite 在 Blade 模板中进行 js 导入

Question

我正在尝试使用 Vite 来使用 Laravel 9，但没有（！）前端框架（如 Vue 或 React）。\n我正在尝试制作一个可重用的 js 模块，我可以在不同的 Blade 模板中使用/加载它。

\n

所以我在“ resources/js/components/utilities ”中创建了一个文件“ menu-btn-toggle.js ” 。

\n

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

\n

然后我在“ resources/js/components ”中创建了一个“ utilities.js ”文件。

\n

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

\n

然后我更新了“ resources/js ”中的“ app.js ”文件

\n

import './bootstrap';\nimport './components/utilities';\n\nimport Alpine from 'alpinejs';\n\nwindow.Alpine = Alpine;\n\nAlpine.start();\n

\n

到目前为止，这似乎有效（？）。至少，我这么认为。到目前为止，Vite 没有给我任何错误（耶！）

\n

但后来我尝试在刀片模板中导入该模块，但无法使其工作。\n因此，在刀片模板的底部，我添加了以下内容：

\n

<script type="module">\n    import MenuBtnToggle from 'menu-btn-toggle';\n\n    new MenuBtnToggle();\n</script>\n

\n

但这给了我以下错误：

\n

\n

未捕获的类型错误：解析模块说明符 \xe2\x80\x9cmenu-btn-toggle\xe2\x80\x9d 时出错。相对模块说明符必须以 \xe2\x80\x9c./\xe2\x80\x9d、\xe2\x80\x9c../\xe2\x80\x9d 或 \xe2\x80\x9c/\xe2\x80\x9d 开头。

\n

\n

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

\n

\n

由于不允许的 MIME 类型 (\xe2\x80\x9ctext/html\xe2\x80\x9d)，从 ​​\xe2\x80\x9c[local_dev_url]/menu-btn-toggle\xe2\x80\x9d 加载模块被阻止。

\n

\n

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

\n

在没有前端框架的情况下是否可以实现我想要的功能？或者我没有看到明显的东西？我有 php 的经验，不幸的是，我对 Laravel 和 Vite 的经验还不够。

\n

Answer 1

我陷入了几乎相同的情况，我们无法使用 Vite 在刀片文件中使用导入语句。我们通常会得到

\n

\n

未捕获的类型错误：解析模块说明符\n\xe2\x80\x9cmenu-btn-toggle\xe2\x80\x9d 时出错。相对模块说明符必须以 \xe2\x80\x9c 开头。/\xe2\x80\x9d、\n\xe2\x80\x9c../\xe2\x80\x9d 或 \xe2\x80\x9c/\xe2\x80 \x9d。

\n

\n

或者我们得到 404 Blocked 错误几乎与

\n

\n

由于不允许的 MIME 类型 (\xe2\x80\x9ctext/html\xe2\x80\x9d)，从 ​​\xe2\x80\x9c[local_dev_url]/menu-btn-toggle\xe2\x80\x9d 加载模块被阻止\n。

\n

\n

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

\n

window.Alpine = Alpine;\n

\n

但对于您的具体案例问题，您必须执行以下操作

\n

1）在menu-btn-toggle.js里面

\n

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

\n

2）utilities.js内部

\n

import {MenuBtnToggle} from "./utilities/menu-btn-toggle";\nwindow.MenuBtnToggle = MenuBtnToggle;\n

\n

\n

3. 最后在你的 app.js 中

   \n

   导入\'./components/utilities\';

   \n
\n

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

   \n

   新的 MenuBtnToggle();

   \n
\n

\n

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

\n

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

\n

它有效。它在复制与您相同的文件/设置时有效。

\n