Question

我无法导出默认的{多个功能}。

这里是我的设置：

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语法访问它，因此您首先需要导入默认导出：

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

感谢您的所有帮助！其他答案和评论使我很清楚我做错了什么。

导出默认的{foo，bar}在使用babel的node.js中不起作用

3 个答案: