platformize

platformize 通用构建插件和基础 API 适配, 可单独使用

Usage no npm install needed!

<script type="module">
  import platformize from 'https://cdn.skypack.dev/platformize';
</script>

README

platformize

platformize 通用构建插件和基础 API 适配, 可单独使用

使用

pnpm i -S platformize

rollup.config.js注入特定配置

import { mergeRollupOptions } from 'platformize/dist-plugin';

export default mergeRollupOptions(
  {
    input: ['./miniprogram/pages/index/index.ts'],
    output: {
      format: 'cjs',
      dir: 'miniprogram/',
      entryFileNames: 'pages/[name]/[name].js',
    },
  },
  { minify: process.env.BUILD === 'production' },
);

原始方式

需要高度定制rollup.config.js也可以选择自行组装

import { platformize, DEFAULT_API_LIST } from 'platformize/dist-plugin';
import sucrase from '@rollup/plugin-sucrase';
import resolve from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import builtins from 'rollup-plugin-node-builtins';

// threejs+tensorflow需要禁止global的polyfill
DEFAULT_API_LIST.splice(DEFAULT_API_LIST.indexOf('global'), 1);

export default {
  {
    input: ['./miniprogram/pages/index/index.ts'],
    output: {
      format: 'cjs',
      dir: 'miniprogram/',
      entryFileNames: 'pages/[name]/[name].js',
      chunkFileNames: 'chunks/[name].js',
    },
    plugins: [
      builtins(),
      resolve({ extensions: ['.ts', '.js'] }),
      sucrase({ transforms: ['typescript'] }),
      commonjs(),
      ...platformize(DEFAULT_API_LIST), // 注意需要解构
      terser({ output: { comments: false } }),
    ]
  },
}

业务代码根据小程序平台引入对应的Platform

import {
  PlatformManager,
  WechatPlatform,
  TaobaoPlatform,
  WechatGamePlatform,
  BytePlatform,
} from 'platformize';

const width = canvasClientWidth;
const height = canvasClientHeight;
const wechatPlatform = new WechatPlatform(canvas, width, height);
const wechatGamePlatform = new WechatGamePlatform(canvas, width, height);
const taobaoPlatform = new TaobaoPlatform(canvas, width, height);
const bytePlatform = new BytePlatform(canvas, width, height);
PlatformManager.set(wechatPlatform);

window.innerWidth
window.innerHeight
window.devicePixelRatio
requestAnimationFrame();
cancelAnimationFrame();
const xhr = new XMLHttpRequest();
...等等
// 使用完毕后销毁资源
wechatPlatform.dispose();
业务代码中按照Web方式使用以下API, 但非完全等价, 只实现了常用的部分

  • URL

  • Blob

  • window

  • document

  • DOMParser

  • TextDecoder

  • XMLHttpRequest

  • OffscreenCanvas

  • HTMLCanvasElement

  • HTMLImageElement

  • Image

  • atob

  • global

  • navigator

  • performance

  • createImageBitmap

  • cancelAnimationFrame

  • requestAnimationFrame

TODO

  1. 构建缓存 ❎ manualChunks 后小程序开发工具更新速度还行吧
  2. API_LIST 解耦, 可由对应 Platform 方提供, ❎ 还是耦合吧, 一般和引擎相关, three 多了一个 $defaultWebGLExtensions 的全局变量
  3. 提供两种使用方式, 一种集成常用 plugin 以及配置, 传递配置来 overwirte, 另一种只导出 platformize plugin, rollup 配置自行组装 ✅

讨论

可通过群里 DeepKolos 联系我

赞助

如果项目对您有帮助或者有适配需求，欢迎打赏

赞赏码

感谢各位支持~~