未捕获的语法错误：请求的模块“./add.js”不提供名为“add”的导出

Question

我正在尝试学习 ES6 导入和导出，但我遇到了一个错误，无法导入我的模块。我也试过import .. from 'add.js'没有 ./ 但仍然没有运气。

未捕获的语法错误：请求的模块“./add.js”不提供名为“add”的导出

我的文件夹结构是这样的

C:\xampp\htdocs\es6\import.export\
- index.html
- app.js
- add.js

索引.html

<html>
    <head>
        <script type="module" src="app.js"></script>
    </head>

    <body>

    </body>
</html>

应用程序.js

import { add } from './add.js'

console.log(add(2,3))

添加.js

export default function add (a, b) {
// export default function (a, b) { <-- does not work either, same error
    return a + b;
}

Answer 1

选项1

命名您的导出而不是使用default。它应该是这样的

// add.js
export const add =  (a, b) =>  a + b;
// OR
// export const add = function(a, b) { return a+b };

// app.js
import { add } from './add';

使用export default语法。看起来像这样

// add.js
export default function add(a, b) {
  return a + b;
}

// app.js
import add from './add';

Answer 2

有两种导出：命名导出（每个模块几个）和默认导出（每个模块一个）。可以同时使用两者，但通常最好将它们分开。

如果要导入模块的默认值，则不需要大括号“{}”：

您可以将花括号“{}”用于命名导出：

这个答案具有误导性。您使用短语“如果您有默认导出”，但“导出”发生在模块的代码中，而不是导入程序的代码中。模块中存在或不存在“默认值”不会影响是否“您不应使用 {}”。重要的是进口商的意图。因此，这应该读起来更像是：“如果您想导入模块的默认值，则不使用花括号'{}'，因为它们表明您想按名称导入。” (5认同)