javascript es6：导入解构不起作用答案

【问题标题】：javascript es6: import destructuring not workingjavascript es6：导入解构不起作用
【发布时间】：2019-12-31 22:53:11
【问题描述】：

在 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 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"
  ]
}

我在这里做错了什么？

【问题讨论】：

如果您想实际选择性地导入（这就是解构），请停止使用 default 导出。或者，如果您绝对需要 default 导出，请停止选择性导入并将模块作为命名空间导入。

标签： javascript ecmascript-6 babeljs

【解决方案1】：

不幸的是，无法导入作为对象的默认导出并同时对其进行解构，因为该语法与导入 named 导出的语法相冲突从另一个文件。你的

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

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

import 后面的 {s 表示您正在导入已命名的内容； 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';

【讨论】：