Laravel Vite 无法全局使用 JS 函数

Question

我使用Laravel与Vite。但是我遇到麻烦了。我有多个JS文件，并包括他们每当我想使用。但是我不能在另一个文件中使用我在一个文件中创建的函数。

我有一个app.js文件看起来像这样:

import jQuery from 'jquery';
window.$ = jQuery;
import './bootstrap';
import './main.js';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

我在main。js中有这样一个函数:

function testFunction() {
alert('test');
}

我把Vite定义到我的布局刀片，像这样:

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

我有另一个页面包含另一个JS文件，像这样:

@extends('layouts.app')
@section('content')

@endsection
@section('scripts')
@vite(['resources/js/edit-note-page.js'])
@endsection

在JS文件中，我想使用我开始提到的函数像这样:

testFunction();

但是我得到一个Uncaught ReferenceError: testFunction未定义控制台错误。我想不明白。正确的做法是什么?

我使用Laravel与Vite。我有多个JS文件，并包括他们每当我想使用。但是我不能在另一个文件中使用我在一个文件中创建的函数。

Answer 1

每个文件都将被包装以实际阻止您试图做的事情，除非在窗口对象上显式定义(注意如何在app.js中设置window.Alpine = Alpine;)。另一种更现代的方法是使用出口。下面是一个使用你的文件结构的例子。

main.js:

function testFunction() {
alert('test');
}
export default testFunction;

edit-note-page.js:

import testFunction from './path/to/file/name';
...code here

导入文件的路径不需要以。js作为扩展名。

注意:修改后，app.js内部不再需要import './main.js';