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

【问题标题】：Importing CommonJS does not destructure correctly in ES6在 ES6 中导入 CommonJS 不能正确解构
【发布时间】：2018-11-29 20:14:52
【问题描述】：

在我的模块依赖项的根目录中，我有一个名为 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语法导入的问题。

我尝试过像这样显式设置代码，但这似乎没有达到我想要的效果（创建一个具有默认属性的模块）：

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

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

【问题讨论】：

默认导出不带括号导入。尝试更改为export { someComponent }，或仅更改为import someComponent from './....'

【解决方案1】：

两种方式，任一种：

export const someComponent

然后：

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

或者：

export default {
  someComponent
}

然后：

import someComponent from 'my-dependency/form'

【讨论】：