Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bocchi) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

使用方法

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

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

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

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

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

功能

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

以 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/jszip@3.10.1/dist/jszip.min.js
// ==/UserScript==

支持 [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>

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

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