介绍

一个帮助你上传静态资源到 CDN 的插件，上传成功后用 CDN 地址自动替换掉源代码引用，默认支持静态资源压缩

功能

• 支持 阿里云、腾讯云、七牛云等等 oss 客户端，支持普通 http 文件上传接口
• 支持 png | jpg | jpeg | gif | svg | bmp | webp 格式的静态资源，可自定义需要上传的静态资源
• 支持静态资源压缩、压缩日志、自定义压缩配置
• 支持解析通过 alias 引用的静态资源
• 支持任何前端构建工具环境使用
• 支持静态资源上传结果缓存，避免重复上传
• 支持上传成功后，同步删除本地的静态资源

使用

# npm
npm i upload-assets-to-cdn --save-dev

# pnpm
pnpm i upload-assets-to-cdn -D

通过 oss 客户端进行上传

在项目根目录新建 upload-assets-to-cdn.config.mjs

import OSS from 'ali-oss';
import crypto from 'node:crypto';
import path from 'node:path';
import uploadAssetsToCdn from 'upload-assets-to-cdn';

const client = new OSS({
  region: 'oss-cn-shanghai',
  bucket: 'my-pic-lib',
  accessKeyId: '',
  accessKeySecret: '',
});

uploadAssetsToCdn({
  async upload({ fileSource, fileName }) {
    const fileExtName = path.extname(fileName);
    const basicFileName = path.basename(fileName, fileExtName);
    const fileMD5Name = crypto
      .createHash('md5')
      .update(basicFileName)
      .digest('hex');

    return client.put(`project-xxxx/${fileMD5Name}`, fileSource);
  },
});

在 package.json 的 script 中添加命令: "upload-assets-to-cdn": "node ./upload-assets-to-cdn.config.mjs"

生成结果：

npm run upload-assets-to-cdn

通过 http 文件上传接口进行上传

在项目根目录新建 upload-assets-to-cdn.config.cjs

const axios = require('axios');
const FormData = require('form-data');
const crypto = require('node:crypto');
const path = require('node:path');

uploadAssetsToCdn({
  async upload({ fileSource, fileName, fileType, filePath }) {
    const fileExt = path.extname(fileName);
    const basicFileName = path.basename(fileName, fileExt);
    const fileMD5Name = crypto
      .createHash('md5')
      .update(basicFileName)
      .digest('hex');

    const formData = new FormData();
    formData.append('systemCode', 'PHARMACY');
    formData.append('belongCode', 'RP');
    formData.append('belongID', fileMD5Name);
    formData.append('file', fileSource, {
      filename: fileName,
      contentType: fileType,
    });

    try {
      const response = await axios.post(
        'https://file.xxxxxxx.com/api/upload/file',
        formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        }
      );

      if (response?.data?.data?.remoteAddress) {
        return { url: response?.data?.data?.remoteAddress };
      }

      return { url: '' };
    } catch (error) {
      console.error('Error uploading file:', error);
      return { url: '' };
    }
  },
});

在 package.json 的 script 中添加命令: "upload-assets-to-cdn": "node ./upload-assets-to-cdn.config.cjs"

生成结果：

npm run upload-assets-to-cdn

参数

属性	必填	类型	默认值	说明
upload	是	(uploadItem: IUploadItem) => Promise<{ url: string }>	-	自定义如何上传文件
exclude	否	RegExp | string | string[]	-	自定义需要排除的静态资源，例如："@/assets/logo.png"
isLog	否	boolean	true	是否启用上传日志
isCache	否	boolean	true	是否缓存已上传的静态资源
isCompress	否	boolean	true	是否启用静态资源压缩功能
isDeleteOriginAsset	否	boolean	false	上传成功后，是否删除原始的静态资源文件
alias	否	Record<string, string>	{ '@': './src' }	别名规则
compressOptions	否	Record<"png" | "jpg" | "jpeg" | "gif" | "webp", PngOptions | JpegOptions | GifOptions | WebpOptions>	-	sharp静态资源压缩配置参数
excludeCompressFileType	否	string[]	['svg', 'bmp']	自定义不需要压缩的静态资源类型
globbyPatternStr	否	string	'src/*/.{js,jsx,ts,tsx,vue,css,less,scss,sass}'	待扫描文件的匹配规则
assetPattern	否	RegExp	'.{png,jpg,jpeg,gif,svg,bmp,webp}'	自定义需要上传的静态资源
sourceCodeDirectory	否	string	'src'	自定义应用源代码目录

• sharp 静态资源压缩配置文档地址
• globby 文件匹配规则文档地址

FAQ

为什么在 jsx 文件中无法正常工作，如何兼容？

由于在 jsx 文件中，不支持 <img src="../assets/logo.png" /> 这种相对路径引入静态资源的方式，所以通常会使用 import Logo from '../assets/logo.png' 这种方式引入静态资源，使用该插件自动上传 CDN 后，代码会变成 import Logo from 'https://cdn.xxxx.com/logo.png'，这样就会造成代码错误，所以 React 项目中，要想该插件能正常使用，你需要改变静态资源引入方式为：<img src="src/assets/logo.png" />，或者你手动将import Logo from 'https://cdn.xxxx.com/logo.png'中的 CDN 地址回填到代码对应的引用中

贡献

环境要求

• node 18+
• pnpm 9+

提交 Pull Request

1. 熟悉 Pull Request 规范
2. fork 此仓库
3. 开一个新分支修改代码：git checkout -b my-branch main
4. 确保你的代码可以通过所有测试用例(新增功能需要添加新的功能测试用例)：pnpm test
5. 创建 changeset 文件通过命令：pnpm changeset
6. 使用 commit 提交你的修改(需遵循 commitlint 规范)
7. 发起 Pull Request

License

MIT