webpack5 七牛雲打包外掛,支援vue-cli5構建

cduyzh發表於2022-05-23

起因

市面上的外掛不維護,難用,不支援最新的webpack5配置,自己技術棧的vue-cli5已經升級到webpack5,所以需要開發一款相容最新腳手架的打包七牛雲外掛
自己取巧設計並開發一個增量檔案上傳功能,純前端實現方式。主要是為了解決每次打包不管檔案變沒變都把所有目錄下的檔案一起丟上去,專案大了很費時,而且也佔用了七牛雲重新整理檔案和上傳檔案的時間。

大致的思路:

打包後本地生成一個資源對映檔案=>跟線上的檔案做對比=>查詢差異項=>對不在雲上的資源進行上傳和重新整理

能有效減少打包體積,專案越大效果越顯著,因為大部分時間是在上傳幾百上千的資源,以及對他們進行逐個重新整理上

github地址
webpack-plugin-qiniu-upload

npm地址
webpack-plugin-qiniu-upload

<div align="center">

<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

NameTypeDefaultDescription
qiniuAccessKey{String}nullYour Qiniu AccessKey
qiniuSecretKey{String}nullYour Qiniu SecretKey
qiniuBucket{String}nullYour Qiniu Bucket Name
qiniuZone{String}nullYour Qiniu zone code
enabledRefresh{Boolean}falseIs enable refresh the file on Qiniu Clound after file upload
excludeHtml{Boolean}trueIs exclude html file
onlyRefreshHtml{Boolean}falseonly 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...):

Namevalue
華東"Zone_z0"
華北"Zone_z1"
華南"Zone_z2"
北美"Zone_na0"

待辦事項

  • [x] 支援增量更新的檔案上傳
  • [ ] 支援日誌檔案清理或拉取範圍篩選