bocchi

一个用于油猴用户脚本(userscript)的构建工具

安装

``shell

npm

npm i bocchi -D

yarn

yarn add bocchi -D

pnpm

pnpm i bocchi -D
`

$3

`shell

npm

npm create bocchi-app

yarn

yarn create bocchi-app

pnpm

pnpm create bocchi-app
`

使用方法

1. 在 package.json 同级目录创建 meta.template

`
// ==UserScript==
// @name
// @namespace #homepage#
// @version #version#
// @description #description#
// @author
// @match https://example.com/*
// @grant none
// @downloadURL
// @updateURL
// ==/UserScript==
`

2. 编写入口文件 src/index.(j|t)s
3. 在 package.json 中添加脚本

`json
{
"scripts": {
"dev": "bocchi dev",
"build": "bocchi build"
}
}
`

4. 使用 npm run dev 进行开发，使用 npm run build 进行生产打包

功能

1. 支持引入第三方链接，将依赖库排除出源码

- 以 jszip 为例，先安装 jszip 用于提供代码提示

`shell
npm i jszip
`

- 在 package.json 文件中添加 globals 对象，填写规则为 {"包名称": "全局变量名称"}

`diff
{
"dependencies": {
"jszip": "^3.10.1"
},
+ "globals": {
+ "jszip": "JSZip"
+ }
}
`

- 在 /meta.template 文件中引入第三方链接

`diff
// ==UserScript==
// @name
// @namespace #homepage#
// @version #version#
// @description #description#
// @author
// @match https://example.com/*
// @grant none
+ // @require https://unpkg.com/jszip@3.10.1/dist/jszip.min.js
// ==/UserScript==
`

2. 支持 [name].template.html

.template.html 文件格式是本项目自定义的格式，该文件会输出一个对象供其他文件使用，对象的键为顶层且具有 id 的节点，值为对应节点的字符串

`html




`

`js
// 文件: index.js
import tmp from './hello.template.html'

console.log(tmp.tmpId) //=>
console.log(tmp.anchorId) //=>
`

3. 自动加载 postcss.config.js
4. 支持引入 css、sass 文件

`js
import './test.css'
import './hello.sass'
``