自动引入方案
背景
对于一些通用库和共用文件，每个文件都需要重复引入一遍，比较繁琐。如果引入内容过多时，代码的可读性不强。
解决目标
对于通用文件可以无需引入即可使用相关 api：
- 通用库：比如
react/react-dom/mobx/classnames/...等等。 - 内部私有库： 比如
@qt/design、@qt/ui、@qt/style、@qt/shared等等。 - 公用文件：比如
common/文件夹下的公用组件等。
解决方法
使用 auto-import-plugin 插件：https://github.com/antfu/unplugin-auto-import
- 根据文档在
webpack配置中添加auto-import-plugin插件。 tsconfig.json引入插件生成的类型声明文件。.eslintrc引入插件生成的global声明文件。
一些问题
是否支持按需引入？
- 支持，插件内部会判断是否使用了某个库的某个变量，来决定是否引入该库。
是否支持类型提示？
- 支持，但是会多一层类型声明，点击跳转的时候会多点一次，不够理想。
是否有 eslint 错误？
- 没有。插件内部会将相应的变量在
eslint global中声明，所以不会存在no-undef错误。但是react/jsx-no-undef会存在错误，需要开启allowGlobal: true配置，允许全局定义的变量解决。