一、发布一个npm 自定义指令包
1.我们需要通过npm publish 发布一个带 pageag.json 文件夹包
2.pageag.json 里面需要在bin属性下声明 npm指令的名称 和 npm触发的js文件
二、开发一个npm 自定义指令包
1.当我们触发的js 里面有依赖的时候 我们需要 安装到 dependencies 中
因为 当我们安装这个指令包的时候 它会 把依赖在 项目的node_module 里面的指令包下面再次安装
三、来实现 react-script 的打包配置文件抽离
1.获取指令参数 这里我们使用 commander.js 来获取指令参数
代码是这样的
这样在action方法里面就可以 获取到这个start了 这里我们选择使用 shell.js 来执行 对应的npm 打包命令了
四、有几个需要注意的点 就是 路径问题
1.因为这个脚本的配置文件是放在node_modules 里面的 所以执行命令的时候 这里的config 文件地址 应该指向脚本所在的node_modules里面 如果不提前转化路径的话 就会默认当前在项目文件夹一级里面(没有build文件夹 自然就找不到config文件)
五、打包文件里面的路径问题
这个配置文件在node_modules里面 用path.resolve(__dirname, "../src/index.tsx"), 找是找不到的 所有需要用process.cwd() （当前为命令行执行的地址）去找
这个项目我用来 封装 webpack 和 vite（ 以后项目 开发环境 起服务webpack 和 vite 一个命令就可以无缝切换啦
六、vite 这块也好了 给大家看看这块吧
1.先搞个能跑的命令
2.script 也搞个对应的命令
3.最后就是配置vite.config了
4.需要解决的就是其中几个同构问题
1.和webpack公用index.html
2.webpack 的postcss.config 存在 会导致vite报错 所以vite我也用了他的插件
3.react默认是comm.js 的 要用插件转成es 不然会报错
4.webpack 模版默认有的 占位符 vite也要配上去（demo里面弄好了）
六、git demo地址
七、大家记得点赞 点关注
