@ttmg/cli 0.1.0-beta.9 → 0.1.1-beta.1

package/CHANGELOG.md

@@ -14,3 +14,32 @@
 
 1. 支持文件上传进度显示
 2. 支持自动打开浏览器调试模式
+
+## 0.1.0-beta.10
+
+fix: 修复还未完成新编译就直接上传了的问题
+
+## 0.1.0-beta.11
+
+feat: 先关闭自动上传能力
+
+## 0.1.0-beta.12
+
+feat: 支持文件变更监听，告知浏览器文件变更，提醒开发者重新加载游戏
+
+## 0.1.0-beta.13
+
+1. 支持 sourcemap
+2. 优化上传环节产物，过滤 sourcemap 文件，提高上传效率
+
+## 0.1.0-beta.14
+
+1. 修复 client key 未成功写入 mock meta 的问题，导致不一致
+
+## 0.1.0-beta.15
+
+1. 还原 open url 历史方法
+
+## 0.1.1
+
+发布最新版本，提醒开发者升级最新版本

package/dist/index.js

@@ -12,14 +12,36 @@ var path = require('path');
 var require$$4 = require('cheerio');
 var chromeLauncher = require('chrome-launcher');
 var os = require('os');
+var child_process = require('child_process');
+var https = require('https');
 var require$$6 = require('crypto');
 var require$$5$1 = require('archiver');
 var multer = require('multer');
 var WebSocket = require('ws');
+var glob = require('glob');
 var got = require('got');
 var FormData = require('form-data');
-var qrcode = require('qrcode-terminal');
 var ttmgPack = require('ttmg-pack');
+var qrcode = require('qrcode-terminal');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var glob__namespace = /*#__PURE__*/_interopNamespaceDefault(glob);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -275,10 +297,10 @@ async function openUrl(url) {
                 '--auto-open-devtools-for-tabs', // 自动打开 DevTools
                 '--no-default-browser-check',
                 '--allow-insecure-localhost',
-                '--ignore-certificate-errors',
                 '--allow-running-insecure-content',
                 '--remote-allow-origins=*',
                 '--user-data-dir=/tmp/chrome-debug-profile',
+                '--disable-popup-blocking',
             ],
         });
         await new Promise(() => { });
@@ -326,9 +348,65 @@ function getLocalIP() {
     }
 }
 
+// 获取全局已安装版本
+function getGlobalVersion(pkgName) {
+    try {
+        const output = child_process.execSync(`npm ls -g ${pkgName} --depth=0 --json`).toString();
+        const json = JSON.parse(output);
+        return json.dependencies[pkgName].version;
+    }
+    catch (e) {
+        return null;
+    }
+}
+// 获取 npm 最新版本
+function getLatestVersion(pkgName) {
+    return new Promise((resolve, reject) => {
+        https
+            .get(`https://registry.npmjs.org/${encodeURIComponent(pkgName)}/latest`, res => {
+            let data = '';
+            res.on('data', chunk => (data += chunk));
+            res.on('end', () => {
+                try {
+                    const info = JSON.parse(data);
+                    resolve(info.version);
+                }
+                catch (err) {
+                    reject(err);
+                }
+            });
+        })
+            .on('error', reject);
+    });
+}
+async function checkUpdate() {
+    const boxen = (await import('boxen')).default;
+    const pkgName = '@ttmg/cli';
+    const oldVersion = getGlobalVersion(pkgName);
+    const newVersion = await getLatestVersion(pkgName);
+    if (!oldVersion) {
+        console.log(chalk.yellow(`未检测到全局安装的 ${pkgName}`));
+        return;
+    }
+    if (oldVersion !== newVersion) {
+        const message = `
+${chalk.bold('Update available!')} ${chalk.red(oldVersion)} ${chalk.white('→')} ${chalk.green(newVersion)}.
+${chalk.magenta('Changelog:')} ${chalk.cyan(`https://npmjs.com/package/${pkgName}/v/${newVersion}`)}
+To update, run: ${chalk.magenta(`npm i -g ${pkgName}`)}
+    `.trim();
+        console.log(boxen(message, {
+            padding: 1,
+            margin: 1,
+            borderStyle: 'round',
+            borderColor: 'yellowBright',
+        }));
+    }
+}
+
 var libs = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	centerQRCode: centerQRCode,
+	checkUpdate: checkUpdate,
 	getDesktopPath: getDesktopPath,
 	getLocalIP: getLocalIP,
 	openUrl: openUrl
@@ -676,6 +754,79 @@ function requireBundle () {
 var bundleExports = requireBundle();
 var index = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
+const CONFIG_DIR = path.join(os.homedir(), '.ttmg-cli');
+path.join(CONFIG_DIR, 'config.json');
+/**
+ * 获取 Client Key（选择或输入）
+ */
+function getClientKey() {
+    /**
+     * 读取 project.config.json 中的 appid/appId
+     */
+    const projectConfigPath = path.join(process.cwd(), 'project.config.json');
+    let clientKey;
+    try {
+        const projectConfig = JSON.parse(fs.readFileSync(projectConfigPath, 'utf-8'));
+        clientKey = projectConfig.appid || projectConfig.appId;
+    }
+    catch (e) {
+        console.log('read project.config.json failed', e);
+        clientKey = '';
+    }
+    if (clientKey) {
+        return clientKey;
+    }
+    else {
+        console.log(chalk.red.bold('No appid found in project.config.json, you should provide it in project.config.json'));
+        process.exit(1);
+    }
+    // const keys = readClientKeys();
+    // if (keys.length > 0) {
+    //   // 有历史 key，展示选择框
+    //   const { selectedKey } = await inquirer.prompt([
+    //     {
+    //       type: 'list',
+    //       name: 'selectedKey',
+    //       message: 'Please select your game id（client_key）：',
+    //       choices: [...keys, new inquirer.Separator(), 'Add new game id'],
+    //     },
+    //   ]);
+    //   if (selectedKey === 'Add new game id') {
+    //     // 输入新 key
+    //     const { newKey } = await inquirer.prompt([
+    //       {
+    //         type: 'input',
+    //         name: 'newKey',
+    //         message: 'Please input your new game id（client_key）：',
+    //         validate: (input: string) => (input ? true : 'Please input game id'),
+    //       },
+    //     ]);
+    //     saveClientKey(newKey);
+    //     clientKey = newKey;
+    //   } else {
+    //     clientKey = selectedKey;
+    //   }
+    // } else {
+    //   // 没有历史 key，让用户输入
+    //   const { newKey } = await inquirer.prompt([
+    //     {
+    //       type: 'input',
+    //       name: 'newKey',
+    //       message: 'Please input your game id（client_key）：',
+    //       validate: (input: string) => (input ? true : 'Please input game id'),
+    //     },
+    //   ]);
+    //   saveClientKey(newKey);
+    //   clientKey = newKey;
+    // }
+    // return clientKey;
+}
+
+function getOutputDir() {
+    const clientKey = getClientKey();
+    return path.join(os.homedir(), '__TTMG__', clientKey);
+}
+
 class Store {
     constructor(initialState) {
         this.listeners = [];
@@ -746,6 +897,24 @@ async function createServer() {
     app.use(express.json());
     // 解析 FormData body
     app.use(express.urlencoded({ extended: true }));
+    /**
+     * 支持文件访问
+     */
+    const outputDir = getOutputDir();
+    /**
+     *
+     */
+    app.use(express.static(outputDir));
+    /**
+     * 支持获取文件
+     */
+    app.get('/game/files/:fileName', async (req, res) => {
+        const { fileName } = req.params;
+        res.sendFile(path.join(outputDir, fileName));
+    });
+    /**
+     * 支持文件访问
+     */
     /**
      * TODO: 提供的接口供客户端进行调用，告诉 NodeServer 客户端的 host 和 port
      */
@@ -797,141 +966,52 @@ function closeServer() {
     });
 }
 
-const CONFIG_DIR = path.join(os.homedir(), '.ttmg-cli');
-path.join(CONFIG_DIR, 'config.json');
-/**
- * 获取 Client Key（选择或输入）
- */
-function getClientKey() {
-    /**
-     * 读取 project.config.json 中的 appid/appId
-     */
-    const projectConfigPath = path.join(process.cwd(), 'project.config.json');
-    let clientKey;
-    try {
-        const projectConfig = JSON.parse(fs.readFileSync(projectConfigPath, 'utf-8'));
-        clientKey = projectConfig.appid || projectConfig.appId;
-    }
-    catch (e) {
-        clientKey = '';
-    }
-    if (clientKey) {
-        return clientKey;
-    }
-    else {
-        console.log(chalk.red.bold('No appid found in project.config.json, you should provide it in project.config.json'));
-        process.exit(1);
-    }
-    // const keys = readClientKeys();
-    // if (keys.length > 0) {
-    //   // 有历史 key，展示选择框
-    //   const { selectedKey } = await inquirer.prompt([
-    //     {
-    //       type: 'list',
-    //       name: 'selectedKey',
-    //       message: 'Please select your game id（client_key）：',
-    //       choices: [...keys, new inquirer.Separator(), 'Add new game id'],
-    //     },
-    //   ]);
-    //   if (selectedKey === 'Add new game id') {
-    //     // 输入新 key
-    //     const { newKey } = await inquirer.prompt([
-    //       {
-    //         type: 'input',
-    //         name: 'newKey',
-    //         message: 'Please input your new game id（client_key）：',
-    //         validate: (input: string) => (input ? true : 'Please input game id'),
-    //       },
-    //     ]);
-    //     saveClientKey(newKey);
-    //     clientKey = newKey;
-    //   } else {
-    //     clientKey = selectedKey;
-    //   }
-    // } else {
-    //   // 没有历史 key，让用户输入
-    //   const { newKey } = await inquirer.prompt([
-    //     {
-    //       type: 'input',
-    //       name: 'newKey',
-    //       message: 'Please input your game id（client_key）：',
-    //       validate: (input: string) => (input ? true : 'Please input game id'),
-    //     },
-    //   ]);
-    //   saveClientKey(newKey);
-    //   clientKey = newKey;
-    // }
-    // return clientKey;
-}
-
-function getOutputDir() {
-    const clientKey = getClientKey();
-    return path.join(os.homedir(), '__TTMG__', clientKey);
-}
-
-async function uploadGame() {
+async function uploadGame(callback) {
     const outputDir = getOutputDir();
+    callback({
+        status: 'start',
+        percent: '0%',
+    });
     console.log(chalk.yellow.bold('Start compress game resource'));
     const zipPath = path.join(os.homedir(), '__TTMG__', 'upload.zip');
     await zipDirectory(outputDir, zipPath);
     console.log(chalk.green.bold('Compress game package resource success \n'));
-    const res = await uploadZip(zipPath);
-    return {
-        isSuccess: res?.statusCode === 200,
-    };
+    await uploadZip(zipPath, callback);
 }
-function zipDirectory(sourceDir, outPath) {
-    return new Promise((resolve, reject) => {
-        const output = fs.createWriteStream(outPath); // 修正：传入输出路径
-        const archive = require$$5$1('zip', { zlib: { level: 9 } });
-        output.on('close', () => {
-            // console.log('Compress directory done');
-            resolve();
-        });
-        output.on('error', err => {
-            // console.error('Compress directory error:', err);
-            reject(err);
-        });
-        archive.on('error', err => {
-            reject(err);
-        });
+async function zipDirectory(sourceDir, outPath) {
+    const output = fs.createWriteStream(outPath);
+    const archive = require$$5$1('zip', { zlib: { level: 9 } });
+    return new Promise(async (resolve, reject) => {
+        output.on('close', () => resolve());
+        output.on('error', err => reject(err));
+        archive.on('error', err => reject(err));
         archive.pipe(output);
-        archive.directory(sourceDir, false);
-        archive.finalize();
+        try {
+            // 注意这里用 await glob.glob
+            const files = await glob__namespace.glob('**/*', {
+                cwd: sourceDir,
+                nodir: true,
+                ignore: '**/*.js.map',
+            });
+            files.forEach(file => {
+                archive.file(path.join(sourceDir, file), { name: file });
+            });
+            archive.finalize();
+        }
+        catch (err) {
+            reject(err);
+        }
     });
 }
-/**
- * 上传 zip 文件到指定接口
- * @param zipFilePath zip 文件路径
- * @param uploadUrl 上传接口
- */
-// export async function uploadZip(zipPath: string) {
-//   const form = new FormData();
-//   form.append('file', fs.createReadStream(zipPath), 'upload.zip');
-//   try {
-//     console.log(chalk.yellow.bold('Start upload resource to client'));
-//     const { clientServerHost, clientServerPort } = store.getState();
-//     const res = await axios.post(
-//       `http://${clientServerHost}:${clientServerPort}/game/upload`,
-//       form,
-//       {
-//         headers: form.getHeaders(),
-//       },
-//     );
-//     fs.unlinkSync(zipPath);
-//     return res;
-//   } catch (err: any) {
-//     console.error('Upload resource to client failed:', err.message);
-//   }
-// }
-// 使用 require 语法，完全兼容 CommonJS
-async function uploadZip(zipPath) {
+async function uploadZip(zipPath, callback) {
     const form = new FormData();
     form.append('file', fs.createReadStream(zipPath), {
         filename: 'upload.zip',
         contentType: 'application/zip',
     });
-    console.log(chalk.yellow.bold('Start upload resource to client'));
+    // 帮我计算下文件大小，变成 MB 为单位
+    const fileSize = fs.statSync(zipPath).size / 1024 / 1024;
+    console.log(chalk.yellow.bold(`Start upload resource to client, size: ${fileSize.toFixed(2)} MB`));
     const { clientServerHost, clientServerPort } = store.getState();
     const url = `http://${clientServerHost}:${clientServerPort}/game/upload`;
     try {
@@ -942,12 +1022,12 @@ async function uploadZip(zipPath) {
         // 2. 监听上传进度 (这个回调是并行的，不影响封装)
         stream.on('uploadProgress', progress => {
             const percent = (progress.percent * 100).toFixed(1);
-            const transferred = progress.transferred;
-            const total = progress.total;
+            // const transferred = progress.transferred;
+            // const total = progress.total;
             process.stdout.write(`\r${chalk.cyan('Uploading progress:  ')}${chalk.green(percent + '%')}`);
-            // 生成标准的 百分比
-            wsServer?.sendUploadStatus('process', {
-                progress: `${percent}%`,
+            callback({
+                status: 'process',
+                percent: `${percent}%`,
             });
         });
         // 3. 【核心封装】将流的处理过程包装在 Promise 中
@@ -964,6 +1044,10 @@ async function uploadZip(zipPath) {
                 // const responseBody = Buffer.concat(chunks).toString('utf-8');
                 // stream.response 在流结束后才可用
                 // 将完整的响应对象 resolve 出去
+                callback({
+                    status: 'success',
+                    percent: '100%',
+                });
                 resolve({
                     statusCode: 200,
                 });
@@ -972,17 +1056,25 @@ async function uploadZip(zipPath) {
             stream.on('error', err => {
                 // 将错误 reject 出去，这样外层的 try...catch 就能捕获到
                 reject(err);
+                callback({
+                    status: 'error',
+                    percent: '',
+                    msg: err.message,
+                });
             });
         });
         // 4. 当 await 完成后，说明流已成功结束，可以安全地执行后续操作
         process.stdout.write('\n'); // 换行，保持终端整洁
         console.log(chalk.green.bold('✔ Upload completed successfully!'));
         fs.unlinkSync(zipPath);
-        // 5. 返回从 Promise 中解析出的响应数据
         return response;
     }
     catch (err) {
-        // 无论是请求错误还是流处理错误，都会在这里被捕获
+        callback({
+            status: 'error',
+            percent: '',
+            msg: err?.message,
+        });
         process.stdout.write('\n');
         if (err.response) {
             console.error(chalk.red.bold('✖ Upload failed with server error:'), {
@@ -1008,27 +1100,31 @@ class WsServer {
                 if (from === 'browser') {
                     const method = clientMessage.method;
                     switch (method) {
-                        case 'connected':
+                        case 'startUpload':
                             this.sendUploadStatus('start');
-                            uploadGame()
-                                .then(res => {
-                                if (res.isSuccess) {
-                                    this.sendUploadStatus('success', {
-                                        packages: store.getState().packages,
-                                        isSuccess: res.isSuccess,
+                            uploadGame(({ status, percent, msg }) => {
+                                if (status === 'process') {
+                                    this.sendUploadStatus('process', {
+                                        status: 'process',
+                                        progress: percent,
                                     });
                                 }
-                                else {
+                                else if (status === 'error') {
                                     this.sendUploadStatus('error', {
-                                        errMsg: res.errorMsg,
+                                        status: 'error',
+                                        errMsg: msg,
+                                        isSuccess: false,
+                                    });
+                                    console.log(chalk.red.bold('Upload resource to client failed!'));
+                                }
+                                else if (status === 'success') {
+                                    this.sendUploadStatus('success', {
+                                        status: 'success',
+                                        packages: store.getState().packages,
+                                        clientKey: getClientKey(),
+                                        isSuccess: true,
                                     });
                                 }
-                            })
-                                .catch(() => {
-                                this.sendUploadStatus('error', {
-                                    isSuccess: false,
-                                });
-                                console.log(chalk.red.bold('Start upload resource to client failed!'));
                             });
                             break;
                         case 'closeLocalDebug':
@@ -1093,30 +1189,69 @@ class WsServer {
 }
 const wsServer = new WsServer();
 
+async function prepareResource() {
+    console.log(chalk.yellow.bold('Start compile game for debug'));
+    const entryDir = process.cwd();
+    const outputDir = getOutputDir();
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+    }
+    const { isSuccess, errorMsg, packages } = await ttmgPack.debugPkgs({
+        entry: entryDir,
+        output: outputDir,
+        dev: {
+            enable: true,
+            port: DEV_PORT,
+            host: 'localhost',
+            enableSourcemap: true,
+            enableLog: false,
+        },
+        build: {
+            pkgSizeLimit: 30 * 1024 * 1024,
+            mainPkgSizeLimit: 4 * 1024 * 1024,
+        },
+    });
+    if (!isSuccess) {
+        console.log(chalk.redBright('Build game package failed, Please check the error message below:'));
+        console.log(chalk.redBright(errorMsg));
+        process.exit(1);
+    }
+    else {
+        store.setState({
+            packages,
+        });
+        console.log(chalk.green.bold('Compile game package success \n'));
+    }
+}
+
+// import { uploadGame } from './uploadGame';
 async function watchChange() {
     let debounceTimer = null;
     fs.watch(process.cwd(), (eventType, filename) => {
-        console.log(chalk.yellow('game resource change, restart to upload'));
         // 清除之前的定时器
         if (debounceTimer)
             clearTimeout(debounceTimer);
         // 重新设置定时器
         debounceTimer = setTimeout(async () => {
-            wsServer.sendUploadStatus('start');
-            uploadGame()
-                .then((res) => {
-                if (res.isSuccess) {
-                    wsServer.sendUploadStatus('success');
-                }
-                else {
-                    wsServer.sendUploadStatus('error', {
-                        errMsg: res.errorMsg,
-                    });
-                }
-            })
-                .catch(() => {
-                wsServer.sendUploadStatus('error');
+            console.log(chalk.yellow('game resource change, restart to upload'));
+            await prepareResource();
+            wsServer.send({
+                method: 'resourceChange',
             });
+            // TODO：只做文件预准备，但不主动上传
+            // uploadGame()
+            //   .then((res) => {
+            //     if (res.isSuccess) {
+            //       wsServer.sendUploadStatus('success');
+            //     } else {
+            //       wsServer.sendUploadStatus('error', {
+            //         errMsg: res.errorMsg,
+            //       });
+            //     }
+            //   })
+            //   .catch(() => {
+            //     wsServer.sendUploadStatus('error');
+            //   });
             debounceTimer = null;
         }, 500); // 500ms内只执行一次
     });
@@ -1138,30 +1273,6 @@ async function showSchema() {
     });
 }
 
-async function prepareResource() {
-    console.log(chalk.yellow.bold('Start compile game for debug'));
-    const entryDir = process.cwd();
-    const outputDir = getOutputDir();
-    if (!fs.existsSync(outputDir)) {
-        fs.mkdirSync(outputDir, { recursive: true });
-    }
-    const { isSuccess, errorMsg, packages } = await ttmgPack.debugPkgs({
-        entry: entryDir,
-        output: outputDir,
-    });
-    if (!isSuccess) {
-        console.log(chalk.redBright('Build game package failed, Please check the error message below:'));
-        console.log(chalk.redBright(errorMsg));
-        process.exit(1);
-    }
-    else {
-        store.setState({
-            packages,
-        });
-        console.log(chalk.green.bold('Compile game package success \n'));
-    }
-}
-
 async function dev() {
     /**
      * 1. 准备游戏资源
@@ -1181,11 +1292,17 @@ async function dev() {
     await watchChange();
 }
 
-var version = "0.1.0-beta.9";
+var version = "0.1.1-beta.1";
 var pkg = {
 	version: version};
 
 const program = new commander.Command();
+(async () => {
+    try {
+        await checkUpdate();
+    }
+    catch (err) { }
+})();
 program
     .name('ttmg')
     .description('TikTok Mini Games Command Line Tool')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttmg/cli",
-  "version": "0.1.0-beta.9",
+  "version": "0.1.1-beta.1",
   "description": "TikTok Mini Game Command Line Tool",
   "license": "ISC",
   "bin": {
@@ -13,12 +13,12 @@
     "prepublish": "npm run build",
     "build": "rollup -c",
     "watch": "rollup -c -w",
-    "perf": "rollup -c --perf"
+    "perf": "rollup -c --perf",
+    "dev": "ts-node -r tsconfig-paths/register src/index.ts"
   },
   "keywords": [
     "TTMG",
-    "TikTok",
-    "Mini Game"
+    "Mini Games"
   ],
   "author": "zhanghongyang.mocha",
   "dependencies": {
@@ -34,6 +34,7 @@
     "estraverse": "^5.3.0",
     "express": "^5.1.0",
     "form-data": "^4.0.4",
+    "glob": "^11.0.3",
     "got": "^11.8.5",
     "inquirer": "^12.7.0",
     "jsdom": "^26.1.0",
@@ -41,7 +42,7 @@
     "open": "^10.2.0",
     "prettier": "^3.6.2",
     "qrcode-terminal": "^0.12.0",
-    "ttmg-pack": "0.0.17",
+    "ttmg-pack": "0.0.22",
     "ws": "^8.18.3"
   },
   "devDependencies": {
@@ -59,6 +60,8 @@
     "eslint": "^9.31.0",
     "rollup": "^4.46.4",
     "rollup-plugin-visualizer": "^6.0.3",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
     "typescript": "^5.9.2"
   },
   "engines": {