基于 vite Rollup 的书签脚本打包工具 Bookmarklet Cli
alert('Hello, World!');将上面代码打包成类型以下浏览器书签链接
javascript:(function(){alert("Hello, World!");})();void(0);
npm i @xiaohuohumax/bookmark-scriptproject
├── bm.config.ts
├── package.json
├── src
│ ├── index.ts
│ └── time.png
└── tsconfig.json// bm.config.ts 或 bm.config.js
import { defineConfig } from '@xiaohuohumax/bookmark-script';
export default defineConfig({
// 输出目录
outDir: 'dist',
// 书签打包结构, 以及书签脚本入口文件, 图标等
bms: [
{
name: 'show time',
description: ''
href: 'src/time.ts',
icon: 'src/time.png'
}
],
// 其他必要配置
...
});tsconfig.json
{
"compilerOptions": {
"types": [
"@xiaohuohumax/bookmark-script/client"
],
},
}// index.ts
// 也可以使用第三方库 比如: axios, sweetalert2等
// import axios from 'axios';
alert(new Date());修改 package.json
使用 npx bookmark-script --help 可查看其他参数
{
"scripts": {
"build": "bookmark-script"
},
}输出结果
dist
├── favorites.html // 可以通过浏览器直接导入
└── show time
├── bookmark.txt // 书签脚本版本(手动添加至书签)
└── console.js // 控制台版本(F12执行即可)- 路径别名
- 使用CDN减少书签大小
- 自定义打包构建
- 配置环境变量
- 书签添加图标
- 脚本banner
- 脚本中获取书签信息
- 扫描脚本并构建
- 代码混淆压缩
- 将Vue组件构建成书签脚本
- 将React组件构建成书签脚本
玩的开心 🎉🎉🎉🎉