ES6 |如何在这里导出+导入对象？答案

【问题标题】：ES6 | How To Export+Import Objects Here?ES6 |如何在这里导出+导入对象？
【发布时间】：2019-06-27 23:42:59
【问题描述】：

我是一个 ES6+ 新手，我目前正在构建一个 React 应用程序，但我遇到了一个问题 - 我正在尝试导入 2 个对象，但没有这样做。我尝试了各种方法并得到了错误，当我一次尝试没有出错时，我尝试.toString() 对象属性之一的值并得到undefined 的错误。

这是文件结构（忽略不相关的文件）：

src
├── index.js
└── style
    └── colors.js

colors.js 在哪里：

const primaryColor = {
    900: "#001a8f",
    800: "#002EA2",
    700: "#1238ae",
    600: "#1238ae",
    500: "#274ac4",
    400: "#4e66cd",
    300: "#7081d6",
    200: "#9aa5e2",
    100: "#c3c8ed",
     50: "#e7e9f8"
};
primaryColor['main'] = primaryColor[800];

const secondaryColor = {
    900: "#3c3c3c",
    800: "#606060",
    700: "#818181",
    600: "#979797",
    500: "#c2c2c2",
    400: "#dedede",
    300: "#f0f0f0",
    200: "#f5f5f5",
    100: "#fafafa",
     50: "#FFFFFF"
};
secondaryColor['main'] = secondaryColor[50];

我不知道export 在这里如何。

在index.js 我想import primaryColor 和secondaryColor。

导出和导入它们的正确/可能的方法是什么？我以为我知道如何导出和导入，但由于我遇到的错误，我不确定我做错了什么。

【问题讨论】：

你的代码是否使用 Babel Transpiler？

标签： node.js reactjs ecmascript-6 import export

【解决方案1】：

在您的 colors.js 文件中，执行以下操作

const primaryColor = {
    900: "#001a8f",
    800: "#002EA2",
    700: "#1238ae",
    600: "#1238ae",
    500: "#274ac4",
    400: "#4e66cd",
    300: "#7081d6",
    200: "#9aa5e2",
    100: "#c3c8ed",
    50: "#e7e9f8"
};
primaryColor['main'] = primaryColor[800];

const secondaryColor = {
    900: "#3c3c3c",
    800: "#606060",
    700: "#818181",
    600: "#979797",
    500: "#c2c2c2",
    400: "#dedede",
    300: "#f0f0f0",
    200: "#f5f5f5",
    100: "#fafafa",
    50: "#FFFFFF"
};
secondaryColor['main'] = secondaryColor[50];

export { primaryColor, secondaryColor };

在你的index.js 中，使用它：

import { primaryColor, secondaryColor } from './style/colors.js';
...
primaryColorMain = primaryColor['main'];
secondaryColorMain = secondaryColor['main'];

希望这会有所帮助！

【讨论】：

【解决方案2】：

export const primaryColor = {
    900: "#001a8f",
    800: "#002EA2",
    700: "#1238ae",
    600: "#1238ae",
    500: "#274ac4",
    400: "#4e66cd",
    300: "#7081d6",
    200: "#9aa5e2",
    100: "#c3c8ed",
     50: "#e7e9f8"
};
primaryColor['main'] = primaryColor[800];

export const secondaryColor = {
    900: "#3c3c3c",
    800: "#606060",
    700: "#818181",
    600: "#979797",
    500: "#c2c2c2",
    400: "#dedede",
    300: "#f0f0f0",
    200: "#f5f5f5",
    100: "#fafafa",
     50: "#FFFFFF"
};
secondaryColor['main'] = secondaryColor[50];

并导入如下图

import { primaryColor, seondaryColor } from './style/colors.js'

【讨论】：

太好了，谢谢，成功了！其他解决方案（例如您上方和下方的答案）对我不起作用。你知道为什么这行得通而其他行不通吗？另外，我在哪里可以了解导出声明与导出已声明的变量/函数的区别？
我看到了其他答案之一，它不起作用，因为我们不能有两个默认导出

【解决方案3】：

你可以像这样从colors.js文件导出

export default { primaryColor, seondaryColor };

然后像这样从index.js 文件中导入它：

import { primaryColor, seondaryColor } from './style/colors.js'

您可以在此处了解有关命名和默认导入/导出的更多信息：imports exports

【讨论】：

我已经试过了。我现在又试了一次，现在出现错误：Attempted import error: 'primaryColor' is not exported from './style/colors.js'.