bocchi

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

安装

# npm
npm i bocchi -D

# yarn
yarn add bocchi -D

# pnpm
pnpm i bocchi -D

使用模板创建

# npm
npm create bocchi-app <name>

# yarn
yarn create bocchi-app <name>

# pnpm
pnpm create bocchi-app <name>

使用方法

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 中添加脚本

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

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

功能

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

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

npm i jszip

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

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

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

// ==UserScript==
// @name
// @namespace    #homepage#
// @version      #version#
// @description  #description#
// @author
// @match        https://example.com/*
// @grant        none
+ // @require      https://unpkg.com/[email protected]/dist/jszip.min.js
// ==/UserScript==

2. 支持 [name].template.html

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

<!-- 文件: hello.template.html -->
<template id="tmpId">
  <span>1</span>
</template>

<a id="anchorId"></a>

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

console.log(tmp.tmpId) //=> <template id="tmpId">\n  <span>1</span>\n</template>
console.log(tmp.anchorId) //=> <a id="anchorId"></a>

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

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