在项目中使用自己发布的包时遇到的一些问题记录

一、前言

有时在项目中(尤其是内网)会使用自己开发的sdk或者是使用一些自己修改过源码的包,对于这些包的引入很多时候是直接放在public文件夹下即可,但是某些情况下很不方便,比如three.js,在使用examples下的文件常常会用到后处理,各种loader等,但是他们的源码都是import * as THREE from 'three'或者 import {Mesh} from 'three',这种形式,如果放在public下,那么就需要将每个导入都修改为相对路径,引入的少,引入的多就比较麻烦了,基于此背景,本文记录相关的一些经验。

二、引入本地包

2.1 基本引入方式

c++ 复制代码
npm install 待安装包的相对路径

这种方式可以引入,但是存在一个问题,那就是如three.js下的postProcessing文件夹在修改源码后不会自动更新,需要重新安装three,但是在内网环境下很容易出问题,不知什么原因,安装一次要很久,还很容易出错。不推荐!

2.2 优雅的引入方式

我的文件夹结构如下:

2.2.1 先初始化一个包

shell 复制代码
cd node_local_modules/EarthThree
shell 复制代码
npm init

此时会生成package.json,我的结果如下:

json 复制代码
{
  "name": "three",
  "version": "1.0.0",
  "main": "EarthThree.es6.js",
  "directories": {
    "example": "examples"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

2.2.2 主目录配置

回主目录下修改package.json,增加workspaces配置

json 复制代码
{
  "devDependencies": {
    "vite": "^6.0.3"
  },
  "workspaces": [
    "node_local_modules/*"
  ]
}

2.2.2.3 安装three

shell 复制代码
npm install three

此时node_modules中生成了three文件夹并链接到node_local_modules

2.2.2.4 代码中使用

未报错,没有任何问题!

三、 文件夹拷贝后导致的问题

在进行文件夹拷贝后,执行项目会报错,找不到three

3.1 解决方式一

node_modules压缩后拷贝到新的文件夹再解压,解决问题,原理不明,一次次血泪实践换来的解决方案。

3.2 重新建立链接

认真排查后发现,报错时node_modulesthree文件夹是空的

原来是链接断了,解决方式是建立新链接

启动无报错!

四、总结

使用推荐的方案有一个很大的好处就是修改了earthThree文件夹下的文件,增加,替换,修改代码都能立马识别,不需要什么npm update three之类的更新的操作,但是基本引入方式每次都要执行,还总是出错!

相关推荐
知了清语2 分钟前
使用 codex + GPT 5.4 分析已实现的 数据看板
前端
qq_120840937116 分钟前
Three.js 工程向:相机控制与交互手感调优(OrbitControls)
前端·javascript·orbitcontrols
疯狂的魔鬼17 分钟前
从 5 个 Hooks 到注册表模式:Vue 3 复杂详情页的架构演进与原则沉淀
前端·架构
enoughisenough20 分钟前
WEB网络通信
前端
We་ct39 分钟前
LeetCode 300. 最长递增子序列:两种解法从入门到优化
开发语言·前端·javascript·算法·leetcode·typescript
深海鱼在掘金40 分钟前
Next.js从入门到实战保姆级教程(第一章):导读——建立 Next.js 的认知框架
前端·typescript·next.js
渔舟小调41 分钟前
P17 | 管理台动态路由:后端返回菜单树,前端运行时注入
前端
小徐_23331 小时前
uni-app 组件库 Wot UI 2.0 发布了,我们带来了这些改变!
前端·微信小程序·uni-app
❀͜͡傀儡师1 小时前
Claude Code 官方弃用 npm 安装方式:原因分析与完整迁移指南
前端·npm·node.js·claude code
知识分享小能手1 小时前
ECharts入门学习教程,从入门到精通,ECharts高级功能(6)
前端·学习·echarts