0.前言

如何理解 import {xxx} from Component ？

1. 思路 1

1. webpack 方案

配置 resolve.alias可以创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

现在，替换「在导入时使用相对路径」这种方式，就像这样：

import Utility from "../../utilities/utility";

你可以这样使用别名：

import Utility from "Utilities/utility";

也可以在给定对象的键后的末尾添加 $，以表示精准匹配：

alias: {
  xyz$: path.resolve(__dirname, "path/to/file.js");
}

2. umi 方案

在 umi 时发现其内部提供了很多的第三方包，如 lodash。但在组件导入时，可通过:

import { uniqueBy } from "umi";

其原理，umi 会自动在首页导出 index.js 文件

export { default as * } from "../../folder"