通过 Uni API 学习通用跨平台分端构建方案

主流跨平台方案

ionic-native/taro/uni api/

Babel 简单介绍

Uni API 基础介绍

Uni API 分端构建方案

Uni API 文档中《分端构建》介绍。

/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable no-param-reassign */
const { API_NAME_MAP, MAIN_PKG_MAP, PATH_NAME_MAP } = require('./config');
const fs = require('fs-extra');
const path = require('path');
const root = process.cwd();
module.exports = function(babel) {
  const { types: t } = babel;
  return {
    visitor: {
      ImportDeclaration: {
        enter(_path, state) {
          const { node } = _path;
          const importValue = node.source && node.source.value;
          // 替换匹配到的universal路径
          if (API_NAME_MAP[importValue]) {
            if (fs.pathExistsSync(path.resolve(root, 'node_modules', importValue, 'lib'))) {
              // 兼容旧版本构建
              if (API_NAME_MAP[importValue].hasChildApi) {
                const newImports = node.specifiers.map(item => {
                  if (item.type === 'ImportSpecifier') {
                    // import { a, b } from '@uni/xxx'; => 
                    // import a from '@uni/xxx/lib/wechat-miniprogram/a';
                    // import b from '@uni/xxx/lib/wechat-miniprogram/b';
                    return t.importDeclaration([t.importDefaultSpecifier(item.local)], t.stringLiteral(`${importValue}/lib/${PATH_NAME_MAP[state.opts.target]}/${item.local.name}.js`));
                  } else if (item.type === 'ImportDefaultSpecifier') {
                    // import A from '@uni/xxx'; =>
                    // import A from '@uni/xxx/lib/wechat-miniprogram';
                    return t.importDeclaration([t.importDefaultSpecifier(item.local)], t.stringLiteral(`${importValue}/lib/${PATH_NAME_MAP[state.opts.target]}/index.js`));
                  } else {
                    return item;
                  }
                });
                _path.replaceWithMultiple(newImports);
              } else {
                node.source.value = importValue + `/lib/${PATH_NAME_MAP[state.opts.target]}/index.js`;
              }
            } else {
              node.source.value = importValue + `/${PATH_NAME_MAP[state.opts.target]}/index.js`;
            }
          } else if (importValue === '@uni/apis') {
            if (fs.pathExistsSync(path.resolve(root, 'node_modules', importValue, 'lib'))) {
              const newImports = node.specifiers.map(item => {
                if (item.type === 'ImportSpecifier' && MAIN_PKG_MAP[item.local.name]) {
                  // import { a, b } from '@uni/apis'; => 
                  // import a from '@uni/apis/lib/packages/a/wechat-miniprogram';
                  // import b from '@uni/apis/lib/packages/b/wechat-miniprogram';
                  return t.importDeclaration([t.importDefaultSpecifier(item.local)], t.stringLiteral(`${importValue}/lib/packages/${MAIN_PKG_MAP[item.local.name]}/src/${PATH_NAME_MAP[state.opts.target]}/index.js`));
                } else if (item.type === 'ImportDefaultSpecifier') {
                  return t.importDeclaration([t.importDefaultSpecifier(item.local)], t.stringLiteral(`${importValue}/lib/main/${PATH_NAME_MAP[state.opts.target]}/index.js`));
                } else {
                  return item;
                }
              });
              _path.replaceWithMultiple(newImports);
            } else {
              node.source.value = importValue + `/${PATH_NAME_MAP[state.opts.target]}/index.js`;
            }
          }
        },
      },
    },
  };
};

const API_NAME_MAP = {
  '@uni/application': {
    hasChildApi: true,
  },
  '@uni/canvas': {
    hasChildApi: true,
  },
  '@uni/accelerometer': {
    hasChildApi: true,
  },
  '@uni/clipboard': {
    hasChildApi: true,
  },
  '@uni/system-info': {
    hasChildApi: true,
  },
  '@uni/file': {
    hasChildApi: true,
  },
  '@uni/action-sheet': {
    hasChildApi: false,
  },
  '@uni/alert': {
    hasChildApi: false,
  },
  '@uni/toast': {
    hasChildApi: true,
  },
  '@uni/loading': {
    hasChildApi: true,
  },
  '@uni/element': {
    hasChildApi: true,
  },
  '@uni/intersection-observer': {
    hasChildApi: true,
  },
  '@uni/confirm': {
    hasChildApi: false,
  },
  '@uni/location': {
    hasChildApi: true,
  },
  '@uni/image': {
    hasChildApi: true,
  },
  '@uni/navigate': {
    hasChildApi: true,
  },
  '@uni/request': {
    hasChildApi: false,
  },
  '@uni/storage': {
    hasChildApi: true,
  },
  '@uni/pull-down-refresh': {
    hasChildApi: true,
  },
  '@uni/recorder': {
    hasChildApi: false,
  },
  '@uni/video': {
    hasChildApi: true,
  },
  '@uni/scan': {
    hasChildApi: false,
  },
  '@uni/navigation-bar': {
    hasChildApi: true,
  },
  '@uni/animation': {
    hasChildApi: true,
  },
  '@uni/audio': {
    hasChildApi: true,
  },
  '@uni/share': {
    hasChildApi: true,
  },
  '@uni/subscribe-message': {
    hasChildApi: false,
  },
  '@uni/authorize': {
    hasChildApi: false,
  },
  '@uni/page-scroll-to': {
    hasChildApi: false,
  },
  '@uni/make-phone-call': {
    hasChildApi: false,
  },
  '@uni/tab-bar': {
    hasChildApi: true,
  },
};
const MAIN_PKG_MAP = {
  storage: 'storage',
  request: 'network/request',
  navigate: 'navigate',
  image: 'media/image',
  video: 'media/video',
  recorder: 'media/recorder',
  location: 'location',
  confirm: 'interactive/confirm',
  intersectionObserver: 'interactive/intersectionObserver',
  element: 'interactive/element',
  loading: 'interactive/loading',
  toast: 'interactive/toast',
  alert: 'interactive/alert',
  actionSheet: 'interactive/actionSheet',
  pullDownRefresh: 'interactive/pullDownRefresh',
  file: 'file',
  systemInfo: 'device/systemInfo',
  clipboard: 'device/clipboard',
  accelerometer: 'device/accelerometer',
  scan: 'device/scan',
  canvas: 'canvas',
  animation: 'interactive/animation',
  navigationBar: 'interactive/navigationBar',
  application: 'application',
  makePhoneCall: 'device/makePhoneCall',
  pageScrollTo: 'interactive/pageScrollTo',
  authorize: 'open/authorize',
  subscribeMessage: 'open/subscribeMessage',
  share: 'share',
  audio: 'media/audio',
  tabBar: 'interactive/tabBar'
}
const PATH_NAME_MAP = {
  'web': 'web',
  'wechat-miniprogram': 'wechat-miniprogram',
  'miniapp': 'ali-miniapp',
  'bytedance-microapp': 'bytedance-microapp',
  'baidu-smartprogram': 'baidu-smartprogram',
  'kuaishou-miniprogram': 'kuaishou-miniprogram'
};
exports.PATH_NAME_MAP = PATH_NAME_MAP;
exports.MAIN_PKG_MAP = MAIN_PKG_MAP;
exports.API_NAME_MAP = API_NAME_MAP;