feat: add npm package support for template creation

- Add npm package configuration for @javascript-reverse-engineering-infrastructure/create-userscript
- Add bin/create-userscript.js script for template creation
- Update README.md and README_en.md with npm usage instructions
- Add .npmignore and PUBLISH.md for npm publishing
- Published to npm as @javascript-reverse-engineering-infrastructure/[email protected]

Author: CC11001100

.npmignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.git/
+.gitignore
+*.log
+.DS_Store
+.vscode/
+.idea/

PUBLISH.md

@@ -0,0 +1,59 @@
+# 发布到npm指南
+
+## 发布步骤
+
+1. **确保你有npm账号**
+   ```bash
+   npm login
+   ```
+
+2. **检查包名是否可用**
+   ```bash
+   npm view create-userscript
+   ```
+   如果显示404错误，说明包名可用。
+
+3. **发布到npm**
+   ```bash
+   npm publish
+   ```
+
+4. **验证发布成功**
+   ```bash
+   npm view create-userscript
+   ```
+
+## 使用方式
+
+发布成功后，用户可以通过以下方式使用：
+
+```bash
+# 方式1：使用npm create
+npm create @javascript-reverse-engineering-infrastructure/userscript my-project
+
+# 方式2：使用npx
+npx @javascript-reverse-engineering-infrastructure/create-userscript my-project
+```
+
+## 更新版本
+
+当需要更新模板时：
+
+1. 修改代码
+2. 更新版本号：
+   ```bash
+   npm version patch  # 补丁版本 (0.0.1 -> 0.0.2)
+   npm version minor  # 次版本 (0.0.1 -> 0.1.0)
+   npm version major  # 主版本 (0.0.1 -> 1.0.0)
+   ```
+3. 重新发布：
+   ```bash
+   npm publish
+   ```
+
+## 注意事项
+
+- 包名 `create-userscript` 需要在npm上是唯一的
+- 如果包名已被占用，需要修改 `package.json` 中的 `name` 字段
+- 建议使用语义化版本号
+- 发布前确保所有文件都在 `files` 字段中正确配置

README.md

@@ -16,7 +16,30 @@
 
 # 三、快速开始
 
-在当前仓库（https://github.com/JSREI/userscript-template）选择“`Use this template`” --> “`Create a new repository`”，从这个模板仓库创建一个新的仓库： 
+## 方式一：使用npm命令创建（推荐）
+
+使用npm命令直接创建新项目：
+
+```bash
+npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript
+```
+
+或者使用npx：
+
+```bash
+npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript
+```
+
+然后进入项目目录并安装依赖：
+
+```bash
+cd my-userscript
+npm install
+```
+
+## 方式二：从GitHub模板创建
+
+在当前仓库（https://github.com/JSREI/userscript-template）选择“`Use this template`” --> “`Create a new repository`”，从这个模板仓库创建一个新的仓库：
 
 ![image-20230816233501101](README.assets/image-20230816233501101.png)
 

README_en.md

@@ -14,6 +14,29 @@ A plan for using `Node.js` + `Webpack` for modular development of Tampermonkey s
 
 # 3. Quick Start
 
+## Method 1: Using npm command (Recommended)
+
+Create a new project directly using npm command:
+
+```bash
+npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript
+```
+
+Or using npx:
+
+```bash
+npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript
+```
+
+Then enter the project directory and install dependencies:
+
+```bash
+cd my-userscript
+npm install
+```
+
+## Method 2: Create from GitHub template
+
 To quickly get started with the project template, follow these steps:
 
 1. Go to the repository at [https://github.com/JSREI/userscript-template](https://github.com/JSREI/userscript-template).

package.json

@@ -1,11 +1,22 @@
 {
-  "name": "userscript-foo",
-  "version": "0.0.1",
-  "description": "this is userscript's description",
+  "name": "@javascript-reverse-engineering-infrastructure/create-userscript",
+  "version": "1.0.0",
+  "description": "A template for developing userscripts with Node.js and Webpack",
   "main": "index.js",
+  "bin": {
+    "create-userscript-template": "./bin/create-userscript.js"
+  },
   "repository": "https://github.com/JSREI/userscript-template.git",
   "namespace": "https://github.com/JSREI/userscript-template.git",
   "document": "https://github.com/JSREI/userscript-template.git",
+  "keywords": [
+    "userscript",
+    "tampermonkey",
+    "greasemonkey",
+    "template",
+    "webpack",
+    "create"
+  ],
   "scripts": {
     "build": "webpack --config webpack.prod.js",
     "watch": "webpack --watch --config webpack.dev.js"
@@ -16,5 +27,11 @@
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-merge": "^5.9.0"
-  }
+  },
+  "files": [
+    "bin/",
+    "template/",
+    "README.md",
+    "LICENSE"
+  ]
 }

website/index.html

@@ -962,13 +962,13 @@
     <h1>UserScript Template</h1>
     <p>使用 Node.js + Webpack 模块化开发油猴脚本的高效方案</p>
     <div class="nav-container">
-        <nav>
-            <ul>
+    <nav>
+        <ul>
                 <li><a href="#features" class="active">核心特性</a>
-                <li><a href="#quick-start">快速开始</a></li>
+            <li><a href="#quick-start">快速开始</a></li>
                 <li><a href="#usage">调试指南</a></li>
-            </ul>
-        </nav>
+        </ul>
+    </nav>
     </div>
 </header>