JavaScript ES6 : import destructuring not working

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 导出一个对象，其中包含不可变的记录。但是，我收到以下错误:

application.js:10 未捕获类型错误:_records_application__WEBPACK_IMPORTED_MODULE_1__.Application 不是构造函数

当我检查 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 后面的 { 表示您正在导入名为的内容；没有 { 表示您正在导入默认值。

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

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';