wmeimob-aliyun
美萌阿里云图片上传插件,将项目中图片上传至阿里云
动机(Motive)
在前端开发尤其是小程序开发中。小程序对代码包的体积有着严格的要求。在前端开发中。很多页面图片(icon、背景图)等。数量非常的多并且部分图片尺寸都很大，导致项目体积很容易超过设定范围。所以这时候你经常需要将图片上传至云服务器上。并且通过OSS访问远程图片。
本插件的目的就在于解决上传图片以及快捷替换图片引用方面提供了一套方便的功能集合。让你能够轻松的管理本地与远程图片
命令
部分需要使用命令行操作。打开命令行面板命令 CTRL + P, Mac 环境为 CMD + P
初始化配置文件
首先要使用此插件。你需要在项目根目录中创建一个配置文件wmeimob-aliyun.config.js
在命令行文件中键入: wmeimob-aliyun.创建配置文件 会在工作目录中新增一个阿里云上传配置文件。
注: 如果已经创建。此命令会被忽略
配置文件参数
module.exports = {
/** ·
* 获取ossTokenUrl路径
*
* 这个接口后端框架默认提供。如果没有。让后端提供就行
*/
url: 'https://shopapi.t5.wmeimob.cn/prod/wechat/api/oss/info',
/** `
* request请求头
* @description 接口如果需要登录验证。请在浏览器或小程序接口中复制Authorization
*/
headers: {
Authorization: 'Wmeimob_eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMzA0MTI2OSIsImV4cCI6MTY5MzQ3NjU4OCwiaWF0IjoxNjkyODcxNzg4LCJqdGkiOiJmNTkzNzMyNmYyMGQ0YTkzYjZlZjUyMzAwM2E0ODhmZCJ9'
},
/**
* 二级路径
*
* 建议命名规则为 {项目拼音缩写}-assets
*
* @description 一般而言。通过上面的oss url能够获取一个目录。类似于/dev。
* 你可以在此基础上追加路径。用于文件隔离.这样后期进行图片bucket迁移或者下载都会很方便
* 所以，最终路径生成结果会类似 https://ocj-uat.oss-cn-shanghai.aliyuncs.com/dev/app-assets/changeType2-JNHWoHwXLyD5.png
*/
subDir: 'wzkj-assets',
/**
* 不需要上传的目录
*
* 'node-modules', 'dist', 'docs' 这些目录默认会被排除
* @description 有些目录如果你确定不需要上传。可以填写在这里
*/
exclude: ['src/modules'],
/**
* 数据替换
* 有时你需要将已经上传的oss图片更换一个新的目录/文件夹。
* 那么你需要配置这个属性。并配合数据替换命令
*
* @attention 为了减少变动。替换仅针对文件路径。对于文件名并不作修改
*/
dataReplace: {
/**
* 源
*/
from: ['https://xxx.oss-cn-shanghai.aliyuncs.com/dev/app-assets']
}
}
上传所有图片
在命令行文件中键入: wmeimob-aliyun.上传所有文件, 上传所有图片至阿里云服务器
操作
除了命令行。插件还提供了其他的方式来上传图片。相比命令行。会更加符合开发者直觉
右键上传图片
首先最常用的就是在图片文件上 【右键】 - 【上传至阿里云】
上传成功后会在调试控制给出上传结果
悬浮框上传图片
在.less|.js|.jsx|.ts|.tsx文件中。将鼠标悬浮在本地图片的引用行上。vscode 会弹出一个弹层。在弹层中会有上传至阿里云并替换引用链接的功能,点击【替换为阿里云链接】.插件会将此处的图片引用自动上传并替换为云链接地址
替换逻辑为
针对不同的文件。替换的效果会略有不同
background-image: url("../assets/images/icon-customer-select.png");
=>
background-image: url("https://wmm-mock.oss-cn-shanghai.aliyuncs.com/flies/2c3eab8b-f0f5-5060-05ad-a1ece201ec33.png");
变量定义
@image: '../assets/images/icon-customer-select.png';
=>
@image: "https://wmm-mock.oss-cn-shanghai.aliyuncs.com/flies/2c3eab8b-f0f5-5060-05ad-a1ece201ec33.png";
background-image: url(@image);
const image = require('../assets/images/icon-customer-select.png')
=>
const image = 'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/flies/2c3eab8b-f0f5-5060-05ad-a1ece201ec33.png';
<Image src={require("../assets/images/icon-customer-select.png")} />
=>
<Image src={'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/flies/2c3eab8b-f0f5-5060-05ad-a1ece201ec33.png'} />
import image from '../assets/images/icon-customer-select.png'
=>
const image = 'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/flies/2c3eab8b-f0f5-5060-05ad-a1ece201ec33.png';
注 在 js(x)?、ts(x)？文件中。仅支持一种绝对路径的引用方式。即~绝对路径解析规则
// tsconfig.js
{
"compilerOptions": {
"paths": {
"~/*": [
"src/*"
]
}
},
}
// app.tsx
import iconSelect from '~/components/assets/images/icon-customer-select.png'
// 会被替换为
const iconSelect = 'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/fileImages/f90fa312-a955-b1d6-dbad-b4fdfbac2398.png'
插件会尽可能的尝试自动替换引用并保证转化代码正确。如果你遇到转化后代码格式替换错误。可以联系研发中心。
美萌OSS图片管理窗口
除了上述上传图片的方式。插件也提供了更加强大、便捷的管理项目图片资源的方式。在项目目录窗口下方。你能看到两个窗口:
接下来我们具体介绍
美萌OSS图片
如图所示。美萌OSS图片提供的功能是将项目中的图片资源提取出来展示。并可以管理上传操作
从图中我们可以将区域分成三个模块
1.首先顶部操作区
- 上传所有图片:一键上传列表中未上传的本地图片至OSS中
- 视图切换: 切换树状视图 或 列表视图
- 刷新: 手动刷新视图
2.信息概要区
概要显示目前项目中存在的图片数量以及已经上传的图片数量
3.资源操作区
资源操作区可以对图片进行上传、复制操作
美萌OSS图片引用替换
如图,美萌OSS图片引用替换提供的功能是将图片中引用图片资源的代码进行替换。省去你每个文件查找的烦恼
从图中我们可以将区域分成三个模块
1.首先顶部操作区
- 视图切换: 切换树状视图 或 列表视图
- 刷新视图: 手动刷新视图
- 展开/收起: 一键展开收起所有代码
2.资源操作区
资源操作区可以对图片进行引用替换
当你点击视窗里面的代码时。插件会自动帮你定位对应的代码。方便你检查
开发
启动
发布
使用vsce工具进行发布
vsce publish patch // 发布修订版本
vsce publish minor // 发布次要版本
vsce publish major // 发布主要版本
