起因
市面上的外掛不維護,難用,不支援最新的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] 支援增量更新的檔案上傳
- [ ] 支援日誌檔案清理或拉取範圍篩選