一、前言
有时在项目中(尤其是内网)会使用自己开发的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_modules
下three
文件夹是空的
原来是链接断了,解决方式是建立新链接
启动无报错!
四、总结
使用推荐的方案有一个很大的好处就是修改了earthThree
文件夹下的文件,增加,替换,修改代码都能立马识别,不需要什么npm update three
之类的更新的操作,但是基本引入方式每次都要执行,还总是出错!