静态资源增量上传oss插件介绍

为了避免打包后的静态资源每次都会全量上传，以及引起的cdn资源同步不及时引起的问题(上传资源务必带有hash值, 以便资源更新)，设计了静态资源增量上传SDK，SDK的设计不仅支持webpack插件模式，还支持脚本命令，同时支持各个生命周期的回调，方便用户灵活实现自己的需求。

安装

npm install increment-upload-oss --save-dev

Usage

Usage: pushoss [options] [command]

Options:
  -V, --version   output the version number
  -h, --help      display help for command

Commands:
  init            init config file
  deploy          start deploy
  help [command]  display help for command    

暴露出的命令

1. pushoss init    创建oss.config.js文件
2. pushoss deploy  执行文件上传oss命令

package.json 脚本配置示例

scripts:{
    "ossConfigInit": "pushoss init", //创建oss.config.js命令

    //脚本形式：不同环境下的部署命令
    "clioss:dev": "cross-env  OSS_ENV=development  pushoss deploy",
    "clioss:qa": "cross-env   OSS_ENV=qa pushoss deploy",
    "clioss:prod": "cross-env  OSS_ENV=production pushoss deploy",

    //webpack插件形式：不同环境下的的部署命令， OSS_ENV可在oss.config.js配置文件里设置 envVariableName
    "build:dev": "cross-env OSS_ENV=development npm run build:mode:dev",
    "build:qa": "cross-env OSS_ENV=qa npm run build:mode:qa",
    "build:prod": "cross-env OSS_ENV=production  npm run build:mode:prod"
} 

webpack插件形式的配置

 #vue.config.js#

 const pushOss = require('increment-upload-oss')
 const ossConfig = require('./oss.config.js');
 module.exports = {
    // ...
    configureWebpack:{
        plugins: [
           new pushOss(ossConfig)
        ]
    }
}

oss.config.js文件配置（两种方式都需要配置此文件）

{
    envVariableName: 'OSS_ENV', // 环境变量名参数设置
    localCatalog: 'dist', // 本地目录
    uploadPath: '/Users/demo', // 上传服务器路径
    storeFolderName: 'upLoadedList', // 统一存储各个项目上传文件历史清单的 总文件夹名
    storeFileName: 'upLoadedFile', // 存储当前项目上传文件历史清单的文件名
    cloud: { // 上传云地址
        cloudType: '阿里云/腾讯云', // aliyun、tencentyun 暂时只支持aliyun
        cloudOption: { //阿里云配置
            endpoint: '',
            accessKeyId: '',
            accessKeySecret: '',
            bucket: ''
        },
        deafultOssBasePath: '', // 默认环境下的oss路径
        devOssBasePath: '', // 开发环境下,上传到oss文件路径
        qaOssBasePath: '', // 测试环境,上传到oss文件路径
        proOssBasePath: '' // 生产环境,上传到oss文件路径
    },
    options: {// 基本配置
        increment: false, // 是否开启增量模式 默认为true 表示增量;false为全量

        showLog: true, // 是否输出日志信息 默认为true

        match: /./, // 匹配哪种格式文件 如：/.js$/ , ’.‘表示匹配所有

        exclude: /^\./ // 忽略哪种格式文件 如：/.png$/
    },
    //部署生命周期钩子函数
    hookFunction: {
        // 读取之前
        beforeRead: () => {
        // console.log("读取文件之前");
        },
        // 读取完成
        readed: () => {
        // console.log("读取文件完成");
        },
        // 上传文件之前
        beforeUpload: () => {
        // console.log("上传文件之前");
        },
        // 上传成功之后
        uploaded: () => {
        // console.log("上传成功之后");
        },
        // 上传失败
        uploadError: () => {
        // console.log("上传失败");
        }
    }
}

上传

1. 脚本形式：         文件打包完成之后，直接使用scripts定义的命令上传
2. webpack插件形式:   直接使用scripts定义的webpack打包命令上传

注意点

1.使用Jest进行单元测试时node版本要求: "node": ">= 10.14.2"