type
status
date
summary
tags
category
icon
问题描述
因开发 Chrome 插件，尝试使用 plasmo ，这样就可以基于React框架开发，而且最重要的是可以热更新，开发效率相对原生开发提升了不少。同时其自带构建编译功能，可以很方便的使用开源的一些的npm模块。
项目中需要使用Markdown，于是找了一个比较流行的npm模块 react-markdown。看起来比较简单的事情，但是意外就是来的那么快，安装了但使用不了，报了一个意料之外的错误 Cannot find module path：
问题定位
比较困惑的是为什么会浏览器会出现path这个nodejs的模块，查看引用的模块主要是 vfile 这个模块引用的问题
可以看到了一个 Conditional 的 export，在浏览器和node会使用不同的实现，具体定义在 package.json文件中：
由于plasmo是基于require的动态加载模块，目测是被识别为Node环境了，于是就出现引用模块失败。
由于无法直接设置运行的环境，于是只好探索其他方式，大致思路是看看能否实现模块的替换，之前搞Webpack时，经常会replace一个文件进行调试。
问题解决
看 plasmo官网文档，并没有构建相关的配置文件，但是凭感觉像是 Vite 构建的，想试一试vite配置，依旧失败。
于是只能从源码入手了，首先是看其package.json依赖了哪些内容，发现是有一个 parcel，大致就是会用这个构建了。然后看看是否会加载 parcl的配置文件 .parcelrc。发现确有其事情。
接下来就好解决了，找到相关的构建解决的思路，然后类比自己搞一个方案：
- 在项目的根目录新建一个 .parcelrc 文件，内容如下：
- 新建一个 customResolve.js 文件，用于替换指定文件：
@plasmohq/parcel-config 这个依赖需要在项目手动再安装一下，然后就可以看到正常了。