随着前端技术的不断发展，越来越多的开发者开始使用 ES6/ES7，甚至是最新的 ES12 来编写 JavaScript 代码。而在使用 ES12 过程中，很多开发者都会遇到一个相似的问题：由于需要大量的第三方模块，导致代码头部的 import 块非常冗长，给代码的阅读和维护带来不便。
那么，如何解决这一问题？接下来，我们将向大家介绍一种简单而有效的方法。
前置知识
在开始探讨这种方法之前，我们需要对以下几个知识点有一定的了解。
ES6 模块引入方式
我们先来回顾一下 ES6 中通常的模块引入方式：
import { func1, func2 } from 'module-name';
import defaultExport from 'module-name';
import * as allExports from 'module-name';Vue 3 中的 defineComponent
Vue 3 中，我们通常会使用 defineComponent 来定义组件。代码示例：
import { defineComponent } from 'vue';
export default defineComponent({
// 组件的其他相关属性和方法
});TypeScript 联合类型
在 TypeScript 中，我们可以使用联合类型来指定一个变量允许的多种类型。代码示例：
let numOrStr: number | string = 10; numOrStr = '十';
解决办法
在 ES6 中，import 可以接受任何有效的表达式作为参数，意味着我们可以动态地构建出需要引入的模块，从而减少冗长的 import 块，以便代码更容易阅读和维护。
那么，我们可以定义一种模板模块，该模块导出常见的第三方库。例如：
// 模板模块 template.js export * as Vue from 'vue'; export * as React from 'react'; export * as _ from 'lodash'; // ...
然后，我们把这个模板模块作为 import 的参数，并使用联合类型来定义需要的模块。代码示例：
import { Vue, React } from './template';
import { defineComponent } from Vue; // 在 Vue 中使用 defineComponent
import { useState } from React; // 在 React 中使用 useState这样，我们就可以通过模板模块来减少代码中的 import 块，使代码更简洁易读。
总结
本文介绍了一种解决 ES12 中由引入大量第三方模块所出现的困扰的方法，通过构建模板模块，并使用联合类型动态地引入所需要的模块，既简单又有效。
当然，这种方法可能无法满足所有场景，但相信能为你提供一些启示，让你在写好代码的同时也能提高效率。
代码示例：
-- -------------------- ---- -------
-- ---- -----------
------ - -- --- ---- ------
------ - -- ----- ---- --------
------ - -- - ---- ---------
-- ---
-- - --- --- ---------------
------ - --- - ---- -------------
------ ------- ---------------------
------- -
----- ----- - -----------
------ -
------
--
--
---
-- - ----- --- --------
------ - ----- - ---- -------------
-------- --------- -
----- ------- --------- - ------------------
-------- ------------- -
-------------- - ---
-
------ -
------- ----------------------
------ -------
---------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b761abadd4f0e0ffff0de0