JavaScript-导入后（webmix）未捕获引用错误：getJobData未定义错误

我正在使用默认的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')
    }
});

我想在分页中访问此函数（位于函数文件中）：

这是分页文件中的代码：

$('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

---

我做错了什么？

您不需要导出吗

// 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)
...

---

当您使用模块时，每个模块负责自己的导入。您不需要导出吗

// 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)
...

---

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

它位于主app.js文件中（代码位于主题的乞讨处）它位于主app.js文件中（代码位于主题的乞讨处）导出不会更改任何内容（相同的错误仍然存在）.分页文件正在尝试执行该函数，对吗？您必须在那里导入函数，而不是在app.js中导入。@Sasha如果您遵循这个答案，那么这一定有效。即使这不是你所要求的，这也是进口的正确方式。在你的

functions.js

中必须有一个导出语句，比如：

export function getJobData（）{……}

，它可以像这样导入你的

pagination.js

文件：

import{getJobData}from./functions'

@Sasha现在最好的方法是在你需要该函数的每个文件中导入它（只要你不使用任何像angular这样的框架），我建议不要将函数定义放在全局范围内scope@Sasha我同意@messerbill。全局范围可能会变得复杂。但是，如果您想使用全局范围，可以执行

global.getJobData=function（）{…}

。或者，如果您在浏览器

窗口中。getJobData=function（）{…}

。但不建议再次使用。导出不会更改任何内容（相同的错误仍然存在）。分页文件正在尝试执行该函数，对吗？您必须在那里而不是在app.js中导入该函数。@Sasha如果您遵循此答案，这必须有效。即使这不是您所要求的，这也是进行导入的正确方法。在

functions.js

中必须有一个导出语句，如：

export function getJobData（）{……}

可以像这样导入到你的

pagination.js

文件中：

import{getJobData}from./functions'

@Sasha现在最好的方法是在你需要该函数的每个文件中导入它（只要你不使用像angular这样的框架）.我建议不要将函数定义放在全局scope@Sasha我同意@messerbill。污染全局作用域可能会让人毛骨悚然。但是，如果您想使用全局作用域，可以执行

global.getJobData=function（）{…}

。或者如果您在浏览器

window.getJobData=function（）{…}

。不过，不建议您这样做。