基于 Umi 4.0 开发
一个自动上传Umi项目打包构建完成后的文件到阿里云OSS的插件。
$ npm install umi-plugin-aliyunoss --save-dev
or
$ yarn add umi-plugin-aliyunoss --dev
在你的umi配置文件 .umirc.js
或者 .umirc.ts
或者config/config.ts
文件中增加如下配置:
import OSSConfig from './oss.json';
export default {
npmClient: 'yarn',
aliyunoss: {
oss: {
accessKeyId: OSSConfig.accessKeyId,
accessKeySecret: OSSConfig.accessKeySecret,
region: OSSConfig.region,
bucket: OSSConfig.bucket,
endpoint: OSSConfig.endpoint
},
options: {
ignoreHtml: true,
projectPath: '/umi-test'
// exclude: /.css/,
}
}
};
其中OSSConfig大致如下:
{
"accessKeyId": "******",
"accessKeySecret": "******",
"region": "oss-cn-hangzhou",
"bucket": "umi-test",
"endpoint": "https://oss-cn-hangzhou.aliyuncs.com"
}
具体支持参数可参考下方配置文档。
入口配置对象
- 类型:UmiPluginAliyunOssOptions
interface UmiPluginAliyunOssOptions {
oss: OSS.Options;
options: UmiPluginOptions;
}
阿里云OSS配置项,可以参考https://github.com/ali-sdk/ali-oss
- 类型:OSS.Options
interface Options {
/** access secret you create */
accessKeyId: string;
/** access secret you create */
accessKeySecret: string;
/** used by temporary authorization */
stsToken?: string | undefined;
/** the default bucket you want to access If you don't have any bucket, please use putBucket() create one first. */
bucket?: string | undefined;
/** oss region domain. It takes priority over region. */
endpoint?: string | undefined;
/** the bucket data region location, please see Data Regions, default is oss-cn-hangzhou. */
region?: string | undefined;
/** access OSS with aliyun internal network or not, default is false. If your servers are running on aliyun too, you can set true to save lot of money. */
internal?: boolean | undefined;
/** instruct OSS client to use HTTPS (secure: true) or HTTP (secure: false) protocol. */
secure?: boolean | undefined;
/** instance level timeout for all operations, default is 60s */
timeout?: string | number | undefined;
/** use custom domain name */
cname?: boolean | undefined;
/** use time (ms) of refresh STSToken interval it should be less than sts info expire interval, default is 300000ms(5min) when sts info expires. */
refreshSTSTokenInterval?: number;
/** used by auto set stsToken、accessKeyId、accessKeySecret when sts info expires. return value must be object contains stsToken、accessKeyId、accessKeySecret */
refreshSTSToken?: () => Promise<{ accessKeyId: string, accessKeySecret: string, stsToken: string }>;
}
注意:OSS.Options
来自ali-oss
包。
插件配置项
- 类型:UmiPluginOptions
interface UmiPluginOptions {
// 是否忽略文件中的html文件,默认为: true 。
ignoreHtml?: boolean;
// oss上传的项目文件夹,默认: ""。会上传到bucket根目录下面。如果填写如"/umi-test",请一定要以"/"开头
projectPath?: string;
// 要上传的文件中,需要忽略上传的文件正则表达式。默认为:/.DS_Store/
exclude?: RegExp;
}
注意:请配置publicPath,否则HTML文件中无法使用打包后的阿里云oss文件!!! publicPath配置应该是:https://{bucket}.{region}.aliyuncs.com/{projectPath}/。如:https://umi-test.oss-cn-hangzhou.aliyuncs.com/umi-test/。
进入examples目录下,运行项目并通过npm run build
测试。