导入CommonJS不能在ES6中正确解构

Question

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

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

在我的项目中，我有：

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

然而someComponent将是undefined。

如果我这样做：

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 whatever from '..'，但也不应破坏工作吗？...

Answer 1

两种方式之一：

export const someComponent

然后：

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

或者：

export default {
  someComponent
}

然后：

import someComponent from 'my-dependency/form'