javascript - 为什么这个 JS 函数无法正确导入到我的blade.php 中？

Question

我有一个 JavaScript 文件“subscribedForms.js”，我在 blade.php 中使用

引用该文件

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

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

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

弹出以下从 Blade 抛出的错误；

"Uncaught ReferenceError: functionTest is not defined"

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

functionTest()

Answer 1

这里的问题是因为您使用的是module.export，它用于在js文件之间导入/要求文件(这可以大大扩展，但对于为了这个问题，我会保持简单)。

<小时/>

我想您当前会在控制台中收到如下警告:

Uncaught ReferenceError: module is not defined

<小时/>

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

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

这会将其附加到父范围，在本例中将是窗口。或者您可以通过以下方式将其显式附加到 window 对象:

或

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

<小时/>

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

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

然后在您的 Blade 文件中，您可以将其导入具有属性 type="module" 的脚本标记内:

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

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

    submittedForms.functionTest();

</script>