導入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

我已經嘗試過像這樣顯式設置代碼，但這似乎沒有實現我想要的（創建帶有默認屬性的模塊）：

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'