aliyun-oss-upload-plugin

阿里云OSS静态文件上传插件，支持Webpack构建钩子、命令行上传和Node.js API调用，特别适用于HBuilder H5项目。

功能特性

• ✅ 自动上传：支持Webpack构建完成后自动上传
• ✅ 手动上传：提供命令行工具进行手动上传
• ✅ API调用：支持Node.js API直接调用
• ✅ HBuilder支持：适配HBuilder H5项目的目录结构
• ✅ 配置灵活：支持多种配置方式和选项
• ✅ 进度显示：上传过程实时显示进度
• ✅ 批量操作：支持批量上传和清空目录

安装

# 使用npm
npm install aliyun-oss-upload-plugin --save-dev

# 使用yarn
yarn add aliyun-oss-upload-plugin --dev

配置

1. 创建配置文件

在项目根目录创建 oss-config.json 文件：

{
  "prefix": "web-dist",
  "accessKeyId": "your-access-key-id",
  "accessKeySecret": "your-access-key-secret",
  "bucket": "your-bucket-name",
  "region": "your-region-id",
  "endpoint": "your-endpoint",
  "cover": false,
  "clear": false,
  "distPath": "./unpackage/dist/build/h5"
}

配置说明

| 配置项 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | prefix | string | web-dist | OSS存储前缀 | | accessKeyId | string | - | 阿里云OSS AccessKeyId | | accessKeySecret | string | - | 阿里云OSS AccessKeySecret | | bucket | string | - | 阿里云OSS Bucket名称 | | region | string | - | 阿里云OSS Region ID | | endpoint | string | - | 阿里云OSS Endpoint | | cover | boolean | false | 是否覆盖已存在的文件 | | clear | boolean | false | 上传前是否清空指定前缀下的所有文件 | | distPath | string | ./unpackage/dist/build/h5 | 本地静态文件目录 |

使用方法

1. 命令行上传

# 使用默认配置
npx aliyun-oss-upload

# 或使用npm脚本
npm run upload-oss

在 package.json 中配置脚本：

{
  "scripts": {
    "upload-oss": "aliyun-oss-upload"
  }
}

2. Webpack插件

在 vue.config.js 或 webpack.config.js 中使用：

const AliyunOSSUploadPlugin = require('aliyun-oss-upload-plugin').WebpackPlugin;

module.exports = {
  // ...
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 添加OSS上传插件
      config.plugins = config.plugins || [];
      config.plugins.push(new AliyunOSSUploadPlugin({
        configPath: 'oss-config.json',
        enabled: true, // 是否启用
        onComplete: (result) => {
          console.log('上传完成回调:', result);
        },
        onError: (error) => {
          console.error('上传错误回调:', error);
        }
      }));
    }
  }
  // ...
};

3. Node.js API

const OSSUploader = require('aliyun-oss-upload-plugin');

// 方式1：直接传入配置
const uploader = new OSSUploader({
  prefix: 'web-dist',
  accessKeyId: 'your-access-key-id',
  accessKeySecret: 'your-access-key-secret',
  bucket: 'your-bucket-name',
  region: 'your-region-id',
  endpoint: 'your-endpoint',
  cover: false,
  clear: false,
  distPath: './unpackage/dist/build/h5'
});

// 方式2：从配置文件加载
const uploader = OSSUploader.fromConfigFile('oss-config.json');

// 执行上传
uploader.upload()
  .then(result => {
    console.log('上传成功:', result);
  })
  .catch(error => {
    console.error('上传失败:', error);
  });

示例：HBuilder H5项目

1. 确保HBuilder已经将H5项目打包到 unpackage/dist/build/h5 目录
2. 安装插件：npm install aliyun-oss-upload-plugin --save-dev
3. 创建配置文件 oss-config.json
4. 在 vue.config.js 中配置Webpack插件
5. 运行构建命令：npm run build:h5

常见问题

Q: 配置文件不存在

A: 请确保在项目根目录创建了 oss-config.json 文件，并正确配置了阿里云OSS信息。

Q: dist目录不存在

A: 请确保已经使用HBuilder或其他工具打包了H5项目，生成了静态文件目录。

Q: 上传失败

A: 检查阿里云OSS的访问权限、网络连接和配置信息是否正确。

Q: Webpack插件不工作

A: 确保插件只在生产环境启用，并且配置文件路径正确。

开发指南

目录结构

ali-oss-upload-plugin/
├── index.js              # 插件主入口
├── lib/
│   ├── uploader.js       # 核心上传逻辑
│   ├── webpack-plugin.js # Webpack插件实现
│   └── cli.js            # 命令行接口
├── package.json
└── README.md

本地开发

# 安装依赖
npm install

# 运行测试
npm test

# 构建
npm run build

许可证

MIT License

贡献

欢迎提交Issue和Pull Request！