ES6 功能不可用答案

【问题标题】：ES6 function not availableES6 功能不可用
【发布时间】：2020-01-02 13:16:44
【问题描述】：

我收到以下错误：

namesearch.js:5 Uncaught ReferenceError: autoComplete is not defined at Namesearch (namesearch.js:5)

./index.js

import autoComplete from '@tarekraafat/autocomplete.js/dist/js/autoComplete';
import Namesearch from './components/namesearch';

document.addEventListener('DOMContentLoaded', function () {
    console.log(' DOM is now safely manipulable.');
    Namesearch();
});

./components/namesearch.js

export default function () {

    console.log("autoComplete function");

    const autoCompletejs = new autoComplete({
        data: {                        
            src: async () => {
            ...

如果我将逻辑直接放入index.js 一切正常，但我想做更模块化的事情。我在这里错过了什么？

【问题讨论】：

你在namesearch.js文件中导入autoComplete了吗？
错误清楚地说明问题出在哪里......;)

标签： javascript ecmascript-6 es6-modules

【解决方案1】：

您需要在 namesearch.js 中导入 autoComplete。

import autoComplete from '@tarekraafat/autocomplete.js/dist/js/autoComplete';

export default function () {

    console.log("autoComplete function");

    const autoCompletejs = new autoComplete({
        data: {                        
            src: async () => {
            ...

【讨论】：

好的。这就是解决方案。我之前使用过另一个自动完成库，并且只能在 index.js 中导入它。

【解决方案2】：

您需要在Namesearch.js 中导入autoComplete，而不是在index.js 中。

使用 ES6 模块的作用域与使用 <script> 的作用域不同。

在一个作用域中导入/定义的所有内容都不会在任何子作用域中可用，并且除非被导出，否则对父作用域不可用。

【讨论】：

【解决方案3】：

每个文件都是一个模块，有自己的变量范围。当您将模块导入文件时。您将其添加到模块范围，而不是全局范围。

因此它在其他文件中不可用。所以我们必须在需要的地方导入每个文件。

没有其他方法需要导入这个

import autoComplete from '@tarekraafat/autocomplete.js/dist/js/autoComplete';

【讨论】：