背景

统一以及收拢与h5与app常用桥接方法，方便业务研发通过内部sdk方法快速上手相关业务功能，也方便基础库研发人员的维护与开发。

项目初始化

终端输入

mkdir jsBridge
cd jsBridge
npm init -y
pnpm install rollup --save-dev
touch rollup.config.mjs
mkdir src
cd src
touch main.js

package.json配置打包指令

  "main": "index.js",
  "scripts": {
    "build": "rollup --config"
  },

rollup.config.js配置输入输出信息

export default {
	input: 'src/main.js',
	output: {
		file: 'index.js',
	}
};

编写常用的桥接方法

src/main.js

import ua from 'useragent-parser-js'
// 关闭webview
export function closeWeb() {
    try {
      const uag = ua.parse(navigator.userAgent)
  
      if (!uag.isAndroid) {
        // IOS调用方法
        window.webkit.messageHandlers.closeWebview.postMessage({})
      } else {
        // Android调用方法
        window.android.closeWebview()
      }
    } catch (error) {
      // 异常处理
  
      console.log(error)
    }
}

打包并上传

npm run build

将开发完的代码上传到公司gitlab仓库

项目中引用sdk文档

这份sdk文档通常落地到公司wiki上，方便未来业务研发同学的使用

安装

npm i git+ssh://sdk的git仓库
如  git+ssh://git@xxxxxxxx/jsbridge.git

常用api说明

closeWeb

调用app关闭网页的方法。

研发同学

xxxxx

遇到的问题

[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.

这是一开始根据官方文档创建了 `rollup.config.js` 文件，
但是后缀是错误的，需要改成`rollup.config.mjs`

参考资料

rollup使用指南

rollup/积目App jsBridge sdk

背景