ElementPlus的调试问题

最初的问题
ElementPlusResolver插件是怎么工作的,为什么以下两种环境都能运行?

  • 我们用ElementPlus时文件在node_modules里
  • 这个运行环境的文件在package里

其实关键点不在ElementPlusResolver解析器上。
上一回讲到unplugin-vue-components解析未被import的组件,根据文件库匹配并置换解析代码。
如果文件库没有匹配到,则会根据已配置的解析器进行解析,ElementPlusResolver解析器会解析到ElementPlus的组件,并置换解析代码,追加导入语句。
默认情况下,导入语句是这样的

import { ElLoadingDirective as __unplugin_directives_0 } from 'element-plus/es'
image.png

这个解释了我们在node_modules安装了ElementPlus时可以运行。
那么另一个问题

ElementPlus官方的调试运行环境的文件在package里
修改package目录为什么可以直接反映到play项目中
image.png

答案在这里:vite.config.ts

 resolve: {
      alias: [
        {
          find: /^element-plus(\/(es|lib))?$/,
          replacement: path.resolve(epRoot, 'index.ts'),
        },
        {
          find: /^element-plus\/(es|lib)\/(.*)$/,
          replacement: `${pkgRoot}/$2`,
        },
      ],
    }

viteconfig里进行了解析别名配置,将导入时的解析路径转向了package目录

image.png

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容