add more npm scripts

README.md

@@ -12,7 +12,7 @@
 
 在完成[使用的IDE](#使用的ide)后，你需要安装[i18n Ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)插件来方便进行对比。
 
-## 启动项目的实时对比功能
+## 安装项目
 
 首先，你的电脑需要具有node.js环境，你可以到[官网](https://nodejs.org/en)进行下载安装。
 这边推荐使用第三方node管理工具来安装node.js，你可以在node.js官网找到推荐的[三方管理工具](https://nodejs.org/en/download/package-manager)，个人推荐使用[nvs](https://nodejs.org/en/download/package-manager/all#nvs)。
@@ -34,20 +34,48 @@ cd rad2-i18n
 npm install
 ```
 
-```sh
-# 编译并运行开发者模式
-npm run dev
-```
-
-此时已经完成了项目的安装并进行语言对比，当然实际上你并不需要使用web页面来进行查看。  
+此时已经完成了项目的安装，当然实际上你并不需要安装node.js和插件等任何环境。  
 这里仅提供一种可行的方式，主要是借助vue的生态环境来快速进行本地化操作。
 
+## 项目的几种启动模式
+
+你可以选择一下的三种模式进行开发
+
++ **[翻译模式]**  
+
+    ***翻译模式*** 能够以最高的效率运行并进行汉化翻译，如果你是为了贡献本地化，请选择此模式。
+
+    ```sh
+    # 编译并运行 翻译模式
+    npm run start
+    ```
+
++ **[预览模式]**  
+
+    ***预览模式*** 能够预览到发布效果，如果你只是想看看项目最终部署到[github-pages](https://landminehq.github.io/rad2-i18n/)上的效果，请选择此模式。
+
+    ```sh
+    # 编译并运行 预览模式
+    npm run preview
+    ```
+
++ **[开发模式]**  
+
+    ***开发模式*** 能够对web ui以及daemon进行实时更新，如果你需要修改web ui或者daemon逻辑，请选择此模式。
+
+    ```sh
+    # 编译并运行 开发模式
+    npm run dev
+    ```
+
 ## 如何贡献
 
 你可以直接修改项目中的
+
 ```dir
 src/ftbqkeys/kubejs/assets/kubejs/lang/zh_cn.json
 ```
+
 语言文件，也可以启动项目的实时对比功能。  
 更推荐你启动项目之后在网页上进行人工翻译。  
 

package.json

@@ -4,13 +4,15 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "start": "concurrently --names \"Vite,Express\" \"npm run dev:vite\" \"node src/server.js\"",
     "dev": "concurrently --names \"Vite,Express\" \"npm run dev:vite\" \"npm run dev:express\"",
     "dev:vite": "vite",
-    "dev:express": "node src/server.js",
+    "dev:express": "nodemon src/server.js",
     "build:vite": "vite build",
     "build:lang": "node src/buildPackage.js",
     "build": "npm run build:vite && npm run build:lang",
-    "preview": "vite preview"
+    "preview:express": "node src/server.js --preview",
+    "preview": "npm run build && npm run preview:express"
   },
   "dependencies": {
     "axios": "^1.6.8",

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <header>
     <div>中英对照</div>
-    <a href="./package.zip"  v-if="appConfig.environment === 'production'"">
+    <a href="./package.zip" v-if="appConfig.environment === 'production'">
       <div>点我下载最新汉化包 package_v{{ packageJson.version }}.zip</div>
     </a>
     <a v-else>
@@ -25,7 +25,7 @@ const appConfig = reactive({
   describeFinishedText: false,
   describeAutoText: false,
   // 运行环境
-  environment: process.env.NODE_ENV,
+  environment: process.env.NODE_ENV || "production",
 });
 
 function updateToolsBarTriger(triger) {

src/api/api.js

@@ -1,15 +1,17 @@
 import network from "./network.json";
 import axios from "axios";
+const url = `http://${network.host}:${network.port}`;
 
 /**
  * @description 获取语言文件请求
  * @param {"en_us"|"zh_cn"|"auto"} params
  * @returns {Promise<AxiosResponse<JSON>>}
  */
 async function getLangFileRequest(params) {
-  const url = new URL(`http://${network.host}:${network.port}`);
-  url.searchParams.set("lang", params);
-  return axios.get(url.href);
+  const uri = new URL(url);
+  uri.pathname = "/resource";
+  uri.searchParams.set("lang", params);
+  return axios.get(uri.href);
 }
 
 export { getLangFileRequest };

src/components/ItemCompoment.vue

@@ -77,26 +77,32 @@ class Item {
   }
 }
 
-let caption = "开发者模式，可以修改";
-if (process.env.NODE_ENV === "production")
-  caption = "预览表，仅供预览，修改无效，禁止商业用途";
-
-// 循环遍历 en_us 中的 key ，对应的寻找 zh_cn 与 auto 的 value 存贮至新建的 item 中
-// 最后将item保存到data数组中
+let caption = "";
 let data = ref([]);
-// 从后端中读取文件
-Promise.all([
-  getLangFileRequest("en_us"),
-  getLangFileRequest("zh_cn"),
-  getLangFileRequest("auto"),
-]).then((res) => {
-  const en_us = res[0].data;
-  const zh_cn = res[1].data;
-  const auto = res[2].data;
-  for (let key in en_us) {
-    data.value.push(new Item(key, en_us[key], zh_cn[key], auto[key]));
-  }
-});
+if (process.env.NODE_ENV === "production") {
+  // 生产环境
+  caption = "预览表，仅供预览，修改无效，禁止商业用途";
+  Promise.all([
+    import("@/ftbqkeys/kubejs/assets/kubejs/lang/en_us.json"),
+    import("@/ftbqkeys/kubejs/assets/kubejs/lang/zh_cn.json"),
+    import("@/ftbqkeys/kubejs/assets/kubejs/lang/auto.json"),
+  ]).then((res) => {
+    updateData(res[0].default, res[1].default, res[2].default);
+  });
+} else {
+  // 开发环境
+  caption = "开发者模式，可以修改";
+  // 从后端中读取文件
+  // 循环遍历 en_us 中的 key ，对应的寻找 zh_cn 与 auto 的 value 存贮至新建的 item 中
+  // 最后将item保存到data数组中
+  Promise.all([
+    getLangFileRequest("en_us"),
+    getLangFileRequest("zh_cn"),
+    getLangFileRequest("auto"),
+  ]).then((res) => {
+    updateData(res[0].data, res[1].data, res[2].data);
+  });
+}
 
 /**
  * @description 监听focusout事件
@@ -116,6 +122,19 @@ function focusout(item, event) {
     );
   }
 }
+
+/**
+ * @description 更新data数组
+ * @param en_us
+ * @param zh_cn
+ * @param auto
+ */
+function updateData(en_us, zh_cn, auto) {
+  data.value = [];
+  for (let key in en_us) {
+    data.value.push(new Item(key, en_us[key], zh_cn[key], auto[key]));
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/server.js

@@ -3,15 +3,26 @@ import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 import bodyParser from "body-parser";
-import network from "./api/network.json" assert { type: "json" };
 
-const app = express();
-/* 后端配置 */
-const port = network.port;
-const host = network.host;
+// 读取当前文件以及路径
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+/* 读取配置文件 */
+const daemonConfig = JSON.parse(
+  fs.readFileSync(path.join(__dirname, "api/network.json"), "utf-8")
+);
+const webConfig = getServerConfig(
+  fs.readFileSync(path.join(__dirname, "..", "vite.config.js"), "utf-8")
+);
+
+const app = express();
+/* 后端配置 */
+const port = daemonConfig.port;
+const host = daemonConfig.host;
+const processArgs = process.argv.slice(2);
+const isPreview = processArgs.includes("--preview");
+
 /* 导入本地化文件 */
 // 文件路径
 const localesPath = path.join(__dirname, "ftbqkeys/kubejs/assets/kubejs/lang");
@@ -49,12 +60,23 @@ app.use((req, res, next) => {
 // 设置解析中间件
 app.use(bodyParser.json());
 
+// 预览设置
+if (isPreview) {
+  // 设置静态资源目录
+  app.use(express.static(path.join(__dirname, "..", "dist")));
+} else {
+  // 静态资源重定向"resource"路径
+  app.get("/", (req, res) => {
+    res.redirect(`http://${webConfig.host}:${webConfig.port}`);
+  });
+}
+
 // 处理预检请求
 app.options("/", (req, res) => {
   res.sendStatus(200);
 });
 
-app.get("/", (req, res) => {
+app.get("/resource", (req, res) => {
   switch (req.query.lang) {
     case "en_us":
       res.send(locales.en_us);
@@ -130,3 +152,20 @@ function log(message, req = undefined, res = undefined) {
     `${timestamp} ${ip} ${method} ${url} ${status} ${length} ${message}`
   );
 }
+
+// vite配置提取出server配置函数
+function getServerConfig(text) {
+  const serverObject = {};
+  let regex;
+  let match;
+  regex = /host[\s:]+"(\w*)"/;
+  match = text.match(regex);
+  serverObject.host = match[1];
+
+  // 匹配端口，可能是文本也可能是数字
+  regex = /port[\s]*:[\s]*(\d*)/;
+  match = text.match(regex);
+  serverObject.port = match[1];
+
+  return serverObject;
+}