时间戳

首页 > 解决方案 > 为什么这个 JS 函数不能正确导入到我的 Blade.php 中？

javascript - 为什么这个 JS 函数不能正确导入到我的 Blade.php 中？

问题描述

我有一个 JavaScript 文件，“submittedForms.js”，我在blade.php其中引用

<script type="module" src="/js/bundle/charts/submittedForms.js"></script>

在submittedForms.js中，我定义了一个名为“ functionTest ”的简单函数和一个表示名为“ submitForms ”的图表的变量。我想在我的blade.php 中导入两者。图表变量导入并渲染得很好！但是，当我添加功能并将导出更改为；

module.exports = {
    functionTest() {
        console.log('this works');
    },
    submittedForms
};

弹出刀片抛出的以下错误；

“未捕获的 ReferenceError：未定义 functionTest”

在blade.php我这样调用 functionTest 中；

functionTest()

标签： javascriptphphtmllaravelimport

解决方案

这里的问题是因为您正在使用module.exportwhich 用于importing/requiringjs 文件之间的文件（这可以大大扩展，但为了这个问题，我会保持简单）。

我想您目前在控制台中收到如下警告：

Uncaught ReferenceError: module is not defined (除非你有一个)

为了让您functionTest在浏览器中可用，您可以将其定义为：

function functionTest() {
    console.log('this works');
}

这会将其附加到父范围，在这种情况下将是window. 或者您可以通过以下方式将其显式附加到window对象：

或者

window.functionTest = function () {
    console.log('this works');
}

如果您想使用较新的 ES 模块进行导入/导出，这是可能的，但是，在撰写本文时支持不会那么好。为此，您应该更改module.exports为export default：

export default {
    functionTest() {
        console.log('this works');
    },
    submittedForms
};

然后在您的刀片文件中，您可以将其导入带有属性的脚本标记中type="module"：

<script type="module"> //notice the 

    import submittedForms from "/js/bundle/charts/submittedForms.js";

    submittedForms.functionTest();

</script>

推荐阅读