起因

市面上的插件不维护,难用,不支持最新的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] 支持增量更新的文件上传
  • [ ] 支持日志文件清理或拉取范围筛选

cduyzh
177 声望47 粉丝