export default {foo，bar}在帶有babel的node.js中不起作用

Question

我無法使導出默認{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! 打印到終端。

我究竟做錯了什么 ？

Answer 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

Answer 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'

Answer 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();

感謝你的幫助 ！ 其他答案和評論讓我清楚地知道我做錯了什么。