export default { foo, bar } 在带有 babel 的 node.js 中不起作用答案

【问题标题】：export default { foo, bar } doesn't work in node.js with babelexport default { foo, bar } 在带有 babel 的 node.js 中不起作用
【发布时间】：2019-06-24 13:50:55
【问题描述】：

我无法让 export default { multiple, functions } 工作。

这是我的设置：

src/index.js:

import {foo} from './foo'

foo();

foo.js:

const foo = () => {
    console.log("Hello!");
}

export default {foo};

还有我的package.json：

{
  "name": "jestjs.io",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "babel-node src/index.js",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/node": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "nodemon": "^1.19.1"
  }
}

当我运行npm start 时，我收到以下错误消息：

/src/index.js:5
(0, _foo.foo)();
         ^

TypeError: (0 , _foo.foo) is not a function

但是，如果我 export default foo 和 import foo 没有大括号 {foo}，它会执行并且我会在终端上打印 Hello!。

我做错了什么？

【问题讨论】：

导出模块是如何转译的？错误就在那里。
import {foo} 将期望命名为 export const foo 或 export function foo。默认导出需要import smth，然后使用smth.foo()
export 'default' (imported as 'n') was not found in './n' 的可能重复项
删除 default 关键字，它将起作用（使用命名导出）。

标签： javascript node.js ecmascript-6 babeljs

【解决方案1】：

您使用了默认导出，并尝试使用命名导入语法访问它，这是不可能的，因此您需要首先导入默认导出：

import fooObj from '/.foo'; // {foo: f}

然后你可以访问你的foo函数：

fooObj.foo(); // Hello

如果对象包含多个属性，您也可以使用Object destructuring：

import fooObj from '/.foo'; // {foo: f, bar: f}

const { foo, bar } = fooObj;

foo();
bar();

你也可以导出foo而不带{}：

const foo = () => {
    console.log("Hello!");
}

export default foo;

然后像这样导入它：

import foo from './foo';

foo(); // Hello

或者您可以使用命名导出：

export const foo = () => {
    console.log("Hello!");
}

然后：

import {foo} from './foo';

foo(); // Hello

【讨论】：

【解决方案2】：

尝试像这样导出它：

const foo = () => {
    console.log("Hello!");
}

export default foo;

这将使foo 成为此文件的默认导出。如果要导出多个文件，可以这样做。

export const foo = () => {
    console.log("Hello!");
}

export const bar = () => {
    console.log("Hello!");
}

不同之处在于导入时，您可以使用任何名称导入第一个（默认导出），而第二个必须是您导出时使用的确切名称。例如import {foo, bar} from 'path/path'

【讨论】：

【解决方案3】：

我终于找到了我正在寻找的解决方案！

// foobar.js
const foo = () => {
    console.log("Hello FOO!");
}

const bar = () => {
    console.log("Hello BAR!");
}

export default {foo, bar}

index.js

import foobar from "./foobar"

const {foo, bar} = foobar

foo();
bar();

感谢您的所有帮助！其他答案和 cmets 让我清楚地知道我做错了什么。

【讨论】：