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

dingtalk-h5package-opensdk

v2.0.11-beta.1

Published

钉钉H5离线包工具

Downloads

9

Readme

dingtalk-h5package-opensdk

安装

npm install dingtalk-h5package-opensdk --save-dev

快速开始

  1. 在项目中安装打包OpenSDK
npm install dingtalk-h5package-opensdk --save-dev
  1. 在项目根目录下创建离线包资源配置文件 localresource.json,声明离线包ID、开放平台网关ApiToken
// localresource.json
{
  "miniAppId": "离线包ID",
  "accessToken": "开放平台网关ApiToken"
}
  1. 在 localresource.json 中添加 assets 配置,声明项目中静态资源(编译产物、静态资源皆可)与线上资源的映射关系。 示例:
{
  // key为应用的URL路径地址,值为本地文件或目录
  "assets: {
    // 目录
    "https://www.example.com/myapp": "./dist",
    // 文件
    "https://www.example.com/myapp/hello.html": "./dist/hello.html"
  },
}
  1. 在 localresource.json 中添加 externalAssets 配置,声明应用中依赖的外部资源(如 react、 react-dom等)。
{
  "externalAssets": [
    "https://unpkg.com/[email protected]/umd/react.production.min.js"
  ]
}
  1. 在项目package.json中声明打包上传离线包命令。
{
  "scripts": {
    "create-h5package": "npx h5package packAndDeploy"
  }
}
  1. 在命令行工具中执行上传发布命令
npm run create-h5package

命令列表

pack

本地离线包资源打包,在本地输出打包后的离线资源文件,文件格式为.zip。离线包ID自动在 localresource.json 文件中查找。 用法:

npx h5package pack

deploy

将指定版本的H5离线包发布到线上。离线包ID和accessToken自动在 localresource.json 文件中查找。 用法:

npx h5package deploy <version>

packAndDeploy

打包离线包资源,上传并发布到线上。离线包ID和打包配置自动在 localresource.json 文件中查找。

npx h5package packAndDeploy

打包配置文件 Config

{
  // 离线包ID
  miniAppId: string;
  // 访问凭证API TOKEN。上传请求开放平台网关时需要。
  accessToken: string;
  // 线上资源URL和本地文件、目录映射关系。key 为线上资源URL地址,值 为本地文件地址。支持 文件 和 目录
  // 示例:
  // {
  //   assets: {
  //     键值为目录。将 ./dist 目录下的资源添加到 https://www.example.com/myapp 下
  //     "https://www.example.com/myapp": "./dist",
  //     键值为文件。将  ./favorite.icon 添加到  https://www.example.com/myapp/favorite.ico
  //     "https://www.example.com/myapp/favorite.ico": "./favorite.ico",
  //   }
  // }
  assets: Record<string, string>;
  // 依赖的外部URL列表。
  // 应用中往往会依赖一些外部资源,如react、vue等外部公共库CDN资源。
  // 添加到此配置后,打包脚本会自动通过HTTP GET请求从网络下载资源内容进行打包。
  // 示例:
  // {
  //   "externalAssets": [
  //     "https://unpkg.com/[email protected]/umd/react.production.min.js",
  //     "https://unpkg.com/[email protected]/dist/vue.global.js",
  //     "https://unpkg.com/[email protected]/dist/jquery.js"
  //   ]
  // }
  externalAssets: string[];
}

代码模式


import { PackagePacker, H5PackageOpenSDK } from 'dingtalk-package-opensdk';

const miniAppId = '离线包ID';
const accessToken = 'your api token';
const sdk = new H5PackageOpenSDK();
const packer = new PackagePacker({
  filename: 'dist.zip',
});
sdk.setConfig({ accessToken });

// 添加本地文件或目录到指定URL
await packer.appendFile('https://www.example.com/myapp', './dist');
// 添加外部文件
await packer.appendUrl('https://unpkg.com/[email protected]/dist/jquery.js');

// 添加自定义数据,自定义数据在调用 biz.resource.getInfo 时返回
await packer.addBizData({
  assetVersion: 'x.y.z',
});

const file = await packer.finalize();

// 创建离线包
const { version } = await sdk.createPackage({ miniAppId, file });

// 发布离线包
await sdk.publishPackage({ miniAppId, version });