问题背景
项目需要上传大文件，既然是大文件，如果一次性进行读取发送、接收都是不可取的，很容易导致内存问题。所以对于大文件上传，就一定要实现切片上传、断点续传。如果自己实现相对比较麻烦，但好消息是正好我们的后台文件服务使用了开源的minio作为对象存储服务，minio也提供了 JavaScript Client SDK ，但当我看到文档正准备一顿操作时就遇到了问题：
问题分析
分析报错后发现原因是我们的项目使用的是vite进行构建，vite默认使用es6标准的 import 的导入方式，不支持require引入。
所以，需要解决的问题就是如何将minio通过import的方式导入到项目中。
解决思路
第一个思路：
尝试将 require 写法直接改为 import 写法，实践结果失败，原因是 minio 又不支持 import 的导入方式。
第二个思路：
既然vite不支持require，但webpack是支持的，可以将minio先通过require导入到一个使用webpack构建的项目，再将此项目引入到我们自己的项目，实践结果成功。
解决方案
最终解决方案为：
新建一个vue2项目，将minio通过require方式导入，再进行导出，然后将项目通过lib库模式打包成组件，上传到npm仓库，项目中使用直接 npm install 命令进行安装使用即可。
打包
下面介绍如何使用vue cli 的lib模式打包库，并发布npm包
第一步：打包
打包命令：vue-cli-service build --target lib --name tz-minio-upload src/minio-upload.js
--target lib 使用lib模式打包
--name tz-minio-upload --指定打包后的文件名
src/minio-upload.js --打包入口文件
package.json（定义打包相关的）
打包入口文件（所有需要导出的项目都要写在这里）
第二步：发布到npm
注意：发布时需要先将源设置为官方源，之前设置过淘宝源的需要修改
1、使用 npm login 进行登录
2、执行 npm publish 进行发布
使用
1、使用npm install '你的包名'进行安装
2、代码中直接通过 import 方式引入即可
资料：
打包后的lib库地址：tz-minio-upload_beta - npm
————————————————
版权声明：本文为CSDN博主「arguments_zd」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43185384/article/details/127672652
网友评论