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

Question

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

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

在submittedForms.js ，我定义了一个名为“ functionTest ”的简单函数和一个代表名为“ submittedForms ”的图表的变量。 我想在我的blade.php 中导入两者。 图表变量导入并呈现良好！ 但是，当我添加函数并将导出更改为时；

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

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

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

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

functionTest()

Answer 1

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

---

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

未捕获的 ReferenceError：未定义模块（除非您有 ）

---

为了让您的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>

Answer 2

导入 JS 文件的正确方法应该是这样的。 希望这会奏效。

<script src="{{ asset('js/bundle/charts/submittedForms.js')}}"></script>