javascript - 导入 CommonJS 在 ES6 中无法正确解构

Question

在我的模块依赖项的根目录中，我有一个名为 form.js 的文件:

module.exports = require("./dist/bundle.js").form;

在我的项目中，我有:

import { someComponent } from 'my-dependency/form';

但是someComponent将是未定义。

如果我这样做:

import form from 'my-dependency/form';
console.log(form.someComponent);

它将在控制台中输出如下所示的内容:

ƒ Rr(e){var t=e.component,n=void 0===t?"input":t,r=e.rend[....]

但是，如果我这样做，它就会起作用:

import form from 'my-dependency/form';
const { someComponent } = form;

我在这里做错了什么以及我如何实现我想要的？

在我的 src/form.js 文件中我有:

import someComponent from "./someComponent";
export default {
  someComponent
};

在src/index.js内部，我有:

import * as form from "./form";
export default {
  form
};

可能的根本原因但不确定如何解决？...

看起来像是使用 CommonJS 导出并使用 ES6 语法导入导致的问题。

这里有人有类似的问题，但是是在 4 年前: https://github.com/google/traceur-compiler/issues/1483

并且，从 2 年前开始: https://github.com/Microsoft/TypeScript/issues/11179

我已经尝试像这样显式设置代码，但这似乎没有达到我想要的效果(创建具有默认属性的模块):

Object.defineProperty(module.exports, "__esModule", {
  value: true
});

看起来在线阅读的人会import * as another from '..'但不应该解构工作吗？...

Answer 1

有两种方法:

export const someComponent

然后:

import { someComponent } from 'my-dependency/form'

或者:

export default {
  someComponent
}

然后:

import someComponent from 'my-dependency/form'