起因
市面上的插件不维护,难用,不支持最新的webpack5配置,自己技术栈的vue-cli5已经升级到webpack5,所以需要开发一款兼容最新脚手架的打包七牛云插件
自己取巧设计并开发一个增量文件上传功能,纯前端实现方式。主要是为了解决每次打包不管文件变没变都把所有目录下的文件一起丢上去,项目大了很费时,而且也占用了七牛云刷新文件和上传文件的时间。
大致的思路:
打包后本地生成一个资源映射文件=>跟线上的文件做对比=>查找差异项=>对不在云上的资源进行上传和刷新
能有效减少打包体积,项目越大效果越显著,因为大部分时间是在上传几百上千的资源,以及对他们进行逐个刷新上
github地址
webpack-plugin-qiniu-upload
npm地址
webpack-plugin-qiniu-upload
<img width="200" height="200"
src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/469672cbab7a467383665f8eadc4e3a0~tplv-k3u1fbpfcp-zoom-1.image">
<h1>Upload To qiniu cloud webpack|vue-cli-Plugin</h1>
<h1>七牛云脚手架打包上传的插件封装,webpack5和vue-cli4|vue-cli5 plugin</h1>
<p>A plugin upload file to qiniu clound for vue-cli4|vue-cli5</p>
<p align="center">
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec7cdb7da72f43e8be480a586aa43881~tplv-k3u1fbpfcp-zoom-1.image" alt="npm version" />
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e60bda97ebf845919b86ee1b3ab5f74a~tplv-k3u1fbpfcp-zoom-1.image" alt="downloads" />
</p>
</div>
<h2 align="center">功能特点</h2>
☁️ 支持最新的sdk 七牛云上传,适配最新的vue脚手架cli4.0及5.0以上版本
💪 适配最新的vue脚手架cli4.0及5.0以上版本,支持webpack5的配置
💪 支持webpack5的配置
🚀 支持增量文件上传,告别所有资源重复上传并刷新文件的烦恼和等待时间
<h2 align="center">安装</h2>
pnpm add webpack-plugin-qiniu-upload -D
yarn add webpack-plugin-qiniu-upload -D
<h2 align="center">使用示例</h2>
vue.config.js
const UploadQiNiuPlugin = require("webpack-plugin-thirdparty-upload");
module.exports = {
...,
plugins: [
new UploadQiNiuPlugin({
qiniuAccessKey: "xxxx",
qiniuSecretKey: "xxxxx",
qiniuBucket: "xxx",
qiniuZone: "Zone_z0",
enabledRefresh: true,
publicPath: 'https://www.yourdomain.com/',
uploadTarget: path.resolve(__dirname, './dist'),
appName: 'xxxx',
fileLogPath: 'log/'
}),
],
};
<h2 align="center">Options</h2>
qiniu cloud Options
Name | Type | Default | Description |
---|---|---|---|
qiniuAccessKey | {String} | null | Your Qiniu AccessKey |
qiniuSecretKey | {String} | null | Your Qiniu SecretKey |
qiniuBucket | {String} | null | Your Qiniu Bucket Name |
qiniuZone | {String} | null | Your Qiniu zone code |
enabledRefresh | {Boolean} | false | Is enable refresh the file on Qiniu Clound after file upload |
excludeHtml | {Boolean} | true | Is exclude html file |
onlyRefreshHtml | {Boolean} | false | only refresh html file (eg: _/demo/index.html + _/demo/), throws an exception in the case of a failure. |
prefixPath | {String} | - | prefix path for the file |
fileLogPath | {String} | log/ | Provide a directory where log file should be stored |
publicPath | {String} | webpackConfig.output.publicPath | 你打包后的资源所带的前缀路径 |
uploadTarget | {String} | webpackConfig.output.path | 待上传的文件夹目录 |
appName | {Number} | Date.now() | 可选,用于生成资源映射文件日志的文件名 |
[qiniuZone]配置参考(https://developer.qiniu.com/k...):
Name | value |
---|---|
华东 | "Zone_z0" |
华北 | "Zone_z1" |
华南 | "Zone_z2" |
北美 | "Zone_na0" |
待办事项
- [x] 支持增量更新的文件上传
- [ ] 支持日志文件清理或拉取范围筛选
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。