如何使用Vite从Laravel中的JS文件导入节点模块?

问题描述 投票:0回答:1

我正在使用 Laravel 和 Vite 为我的资产构建一个项目。我想从 JS 文件加载位于 node_modules 文件夹中的文件:

Project
├── node_modules
├── public
│   ├── js
│   │   ├── my-file.js
├── vite.config.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',
                'node_modules/fathom-client/dist/fathom-client.esm.js' // The file I am trying to import
            ],
            refresh: true,
        }),
    ],
});

我可以将其加载到

view.blade.php
文件中,如下所示:

@vite('node_modules/fathom-client/dist/fathom-client.esm.js'); 

但是,我想从位于公共目录中的

my-file.js
中的文件导入函数,如下所示:

import {
    load as faLoad,
    trackPageview as faPageView,
} from "the/module/";

我尝试在 vite 配置中创建别名并在没有相对路径的情况下导入模块,但这在每种情况下都会导致错误。

javascript laravel node-modules vite
1个回答
0
投票

不幸的是我相信这是不可能实现的。位于

public
文件夹中的每个文件都被视为静态文件,并从公共 URL“按原样”提供。因此,据我了解,我们不能引用
node_modules
文件夹来包含我们想要的文件。

我发现的唯一解决方法是:

  • 如果您的软件包支持 CDN,请使用 CDN 作为
    src
  • 或者直接将node_module文件夹中您需要的缩小后的JS文件复制并粘贴到public文件夹中。然后,使用相对路径将文件导入为 ES 模块。

在尝试从链接到静态

axios
文件的静态
main.js
文件导入
index.html
时,我遇到了同样的问题。为了解决这个问题,我将位于
axios.min.js
文件夹中的
node_modules/axios/dist/esm/
文件复制到
public
文件夹中。这是我的项目目录的概述:

Project
├── node_modules
├── public
│   ├── scripts
│   │   ├── main.js
│   │   ├── axios.min.js
│   ├── index.html
├── vite.config.js

这是我的

index.html
文件:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/styles/style.css" />
    <script type="module" src="/scripts/main.js" defer></script>
  </head>
  <body>
   <!-- Some code... -->
  </body>
</html>

这是我的

main.js
文件:

// ❌ THIS DOES NOT WORK:
// import axios from 'axios';
// import axios from '../../node_modules/axios';

// ✅ THIS WORKS:
import axios from './axios.min.js';

const btnEl = document.querySelector('button');

btnEl.addEventListener('click', async () => {
  const { data: message } = await axios.get('/check');
  console.log('Message received from the backend:", message');
});

也许不是实现这一目标的最佳解决方案,但至少它对我有用。 希望这有帮助,祝你好运😉

© www.soinside.com 2019 - 2024. All rights reserved.