{"id":13681745,"url":"https://github.com/trim21/webpack-userscript-template","last_synced_at":"2025-04-05T00:06:26.872Z","repository":{"id":35683484,"uuid":"151483825","full_name":"trim21/webpack-userscript-template","owner":"trim21","description":"template to build userscript with webpack","archived":false,"fork":false,"pushed_at":"2025-03-27T21:13:14.000Z","size":2134,"stargazers_count":146,"open_issues_count":1,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T23:04:34.306Z","etag":null,"topics":["fetch","template","typescript","userscript","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trim21.png","metadata":{"files":{"readme":"readme.cn.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-03T21:38:09.000Z","updated_at":"2025-03-27T21:13:17.000Z","dependencies_parsed_at":"2023-10-16T16:20:47.549Z","dependency_job_id":"ec2c0ae5-38b8-4fe1-a908-b178c91ca26c","html_url":"https://github.com/trim21/webpack-userscript-template","commit_stats":null,"previous_names":[],"tags_count":2,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trim21%2Fwebpack-userscript-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trim21%2Fwebpack-userscript-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trim21%2Fwebpack-userscript-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trim21%2Fwebpack-userscript-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trim21","download_url":"https://codeload.github.com/trim21/webpack-userscript-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266563,"owners_count":20910836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fetch","template","typescript","userscript","webpack"],"created_at":"2024-08-02T13:01:35.286Z","updated_at":"2025-04-05T00:06:26.842Z","avatar_url":"https://github.com/trim21.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 使用 WebPack 来构件 UserScript\n\n[使用这个 repo 作为模板](https://github.com/Trim21/webpack-userscript-template/generate).\n\n## 开发\n\n1. 允许 Tampermonkey 访问文件网址 `右键插件图标`-`插件管理页面`-`访问文件网址` 或者参照[官方 faq](https://tampermonkey.net/faq.php?ext=dhdg#Q204)\n2. 使用 `npm ci` or `npm i` 安装依赖。\n3. `npm run dev` 来进行自动编译。\n\n在 `dist/` 文件夹会生成两个文件\n\n-   `dist/index.dev.user.js`: **请在浏览器中安装这个油猴脚本** 这个文件不包含有意义的 js 脚本，但是包含了全部的元数据和额外的 `@require file://.../dist/index.debug.js`。\n-   `dist/index.debug.js`: 这是在 webpack 中启用了 `eval-source-map` 选项之后的打包产物。**不要在浏览器中安装这个脚本**。\n\n4. 修改 [src/index.ts](./src/index.ts) 。如果你需要的话你可以引入 css 或者 less 文件。你也可以通过设置 webpack 来引入 scss。\n5. 在 \u003chttps://www.example.com/\u003e 并且打开控制台，你可以看到用户脚本被运行。\n\nlivereload 默认启用。在浏览器中进行自动刷新需要 [这个 chrome 插件](https://chrome.google.com/webstore/detail/jnihajbhpnppcggbcgedagnkighmdlei)\n\n### 注意\n\n每次你修改了你的[metadata](./config/metadata.cjs)，你需要重新安装`index.dev.user.js`。\n\n## TypeScript\n\n已经设置好了`ts-loader`，可以直接 typescript。[example](src/index.ts)\n\n## 跨域请求\n\nhttps://github.com/trim21/webpack-userscript-template/blob/master/src/index.ts\n\n## 使用依赖\n\n有两个办法引入依赖。\n\n### 像以往的 UserScript 一样\n\n在 [metadata 的 require 部分](./config/metadata.cjs#L13-L17) 中修改你引入的依赖。然后在 [config/webpack.config.base.cjs](./config/webpack.config.base.cjs#L21-L25) 的`exclude`配置中里面把他们排除。\n\n### 跟以往的 webpack 一样\n\n直接使用 npm 安装，webpack 会自动打包依赖。\n\n## build\n\n```bash\nnpm run build\n```\n\n`dist/index.prod.user.js` 就是最终打包出来的 UserScript。\n\n## 使用其他打包器\n\n如果你习惯使用 Vite/rollup/esbuild 等打包器，你也可以直接使用以下这几个包来构建你的用户脚本：\n\n[gm-fetch](https://github.com/trim21/gm-fetch)\n\n[userscript-metadata-generator](https://github.com/trim21/userscript-metadata-generator)\n\n## deploy\n\n[github actions](./.github/workflows/nodejs.yml#L68) 会自动在每个 tag 把`dist/index.prod.user.js`部属到`gh-pages`分支的根目录去。\n\n[example](https://github.com/Trim21/webpack-userscript-template/tree/gh-pages)\n\n[deployed](https://trim21.github.io/webpack-userscript-template/)\n\n也可以使用 greasyfork 的自动同步功能来自动同步此链接。（greasyfork 的代码规则禁止代码混淆或最小化）\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrim21%2Fwebpack-userscript-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrim21%2Fwebpack-userscript-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrim21%2Fwebpack-userscript-template/lists"}