JavaScript - 导入后(webmix)未捕获的 ReferenceError : getJobData is not defined error

Question

我正在使用默认的 Laravel webmix 设置

const mix = require('laravel-mix')

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

我的应用程序文件如下所示:

import './components/functions'
import './components/search'
import './components/jobs'
import './components/pagination'

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

我想在分页(位于functions文件中)中访问此函数:

function getJobData() {

    let duration = []
    let jobTypes = []

    $.each($(".duration"), function () {
        if ($(this).is(':checked')) {
            duration.push($(this).val());
        }

    });

    $.each($(".jobTypes"), function () {
        if ($(this).is(':checked')) {
            jobTypes.push($(this).val());
        }

    });

    return {
        term: $('#search_address').val(),
        advancedSearch: $("#advanced_search").is(':checked'),
        profession: $('#search_profession').val(),
        duration: $('#search_duration').val(),
        jobTypes: jobTypes,
        radius: $('#search_radius').val(),
        new: $("#order_new").is(':checked'),
        open: $("#open").is(':checked'),
        expired: $("#expired").is(':checked'),
        jobStatus: $("input[name=jobStatus]").val(),
        duration: duration,
        page: $('.pageNumber.current').data('page')
    }
}

这是分页文件中的代码:

$('body').on('click', '.page-link', function (e) {
    e.preventDefault()

    let $this     = $(this)
    let paginator = $(".paginator")

    console.log(getJobData)

    return;


    $.get($this.attr('link'),  getData(),
        function (data, textStatus, jqXHR) {

        },
        "json"
    );

});

我收到此错误:

app.js:225 Uncaught ReferenceError: getJobData is not defined

我在这里做错了什么？

Answer 1

不需要导出吗？

// functions.js (I think?)
export function getJobData

然后您需要正确导入它才能使用它:

// pagination.js
import { getJobData } from './functions'

因此分页文件如下所示:

// pagination.js
import { getJobData } from './functions';

$('body').on('click', '.page-link', function (e) {
    e.preventDefault()

    let $this     = $(this)
    let paginator = $(".paginator")

    console.log(getJobData)
...

当您使用模块时，每个模块负责自己的导入。