npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@muops/vite-plugin-oss-upload

v0.1.0

Published

OSS 文件上传插件

Downloads

5

Readme

OSS 文件上传插件

使用了场景应用控制,只在构建阶段生效,所以本插件是 Vite 专属的插件,主要功能是自动上传构建后的资源文件到 OSS,并修改相关资源引用地址。

为保证信息安全,不使用本地直传,通过项目标识与服务器提供的上传接口,先上传文件到服务器再由服务器转发到 OSS,相关配置存在服务器当中。

每次上传时都会以当时的月日时分作为上传目录,项目周期内一般不会出现覆盖的情况,这样设计主要是为了避免构建时覆盖已部署的资源导致错误,同时每个版本都有自己的资源目录,要回退版本也比较轻松,同时为了方便查看当前版本的资源目录,构建结束后会在 index.html 最后增加注释标明对应的资源目录名。

构建结果资源目录固定为 dist/assets,入口文件固定为 dist/index.html

使用

// vite.config.js

import OSSUpload from '@muops/vite-plugin-oss-upload'

export default {
  plugins: [
    // 传入一个配置对象
    OSSUpload({
      // 项目标识,供上传接口获取对应 OSS 配置
      name: '******',
      // 为保证信息安全不内置接口地址,具体配置参考其它项目,仅需配置域名
      path: '******',
      // 构建结束后等待执行的时间,避免执行上传时还有处理尚未完成,默认值为 1000ms
      // wait: 1000,
      // 上传类型列表,默认为 png/jpg/mp3,配置此字段将覆盖默认上传类型列表
      // type: ['webp'],
      // 对于没有内置的类型需要指定 MIME 值,否则将被跳过
      // 详见 [MIME 类型表](https://trac.nginx.org/nginx/browser/nginx/conf/mime.types)
      // 内置类型为 png/jpg/mp3/mp4/css/js,不需要额外配置到 mime 当中
      // mime: {
      //   webp: 'image/webp'
      // }
    })
  ]
}

推送

npm i nrm -g  # 通过 nrm 管理源
nrm use npm   # 使用 npm 源
npm login     # 首次使用需要先登录 npm 帐号
npm publish   # 每次推送前须在 package.json 中更新版本号