javascript es6：导入解构不起作用

Question

在modules文件夹中设置 redux 文件：

\modules
    \application
        \actions
            application.js
            index.js
        \records
            application.js
        \reducers
            application.js
            index.js

我的application记录是导出默认值的不可变记录：

import {Record, List, Map, Set, OrderedMap} from 'immutable';

const Application = new Record({
    'loaded': false,
});

export default {
    Application,
};

在我的reducers/application.js文件中，我在导入时解构导出：

import {Record, List, Map, Set, OrderedMap} from 'immutable';
import { Application } from '../records/application';

import 
    APP_INITIALIZE
from '../actions';

const initialAppState = new Application();

export default (state = initialAppState, action )=> {
    switch (action.type) {

    case APP_INITIALIZE:
        return state
                .set('loaded', true);

    default:
        return state;
    }
};

我希望这能工作，因为records/application.js .js 导出一个对象，其中包含不可变记录。 但是，我收到以下错误：

application.js:10 Uncaught TypeError: _records_application__WEBPACK_IMPORTED_MODULE_1__.Application is not a constructor

当我检查reducers/application.js的Application对象时，我得到undefined 。

我的.babelrc文件如下所示：

{
  "presets": [
    "@babel/preset-react",
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 2,
      "targets": {
          "firefox": "64",
          "chrome": "58",
          "ie": "11",
          "electron": "4"   
      },
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

我在这里做错了什么？

Answer 1

不幸的是，这是不可能导入默认的出口是一个对象，并在同一时间解构它，因为这句法冲突与其他文件导入命名出口的语法。 您的

import { Application } from '../records/application';

尝试从另一个文件导入名为Application的命名导出，但它没有这样的命名导出，所以事情中断了。

import后的{表示您正在导入已命名的内容； no { s 表示您正在导入默认值。

您可以在下一行导入默认值和解构：

import FullApplication from '../records/application';
const { Application } = FullApplication;

如果其他文件中确实没有任何其他内容，则将Application记录设为默认导出会更有意义：

const Application = new Record({
    'loaded': false,
});
export default Application;

import Application from '../records/application';

或者您可以命名Application导出，并且没有默认导出：

export const Application = new Record({
    'loaded': false,
});

import { Application } from '../records/application';