Merge pull request #174 from JeremyYu-cn/generate-html

feat: format server import method: from commonJs to EsModule

service/package-lock.json

@@ -19,6 +19,7 @@
       },
       "devDependencies": {
         "@types/express": "^4.17.21",
+        "@types/multiparty": "^4.2.1",
         "@types/node": "^16.18.105",
         "cross-env": "^7.0.3",
         "ts-loader": "^6.0.4",
@@ -247,6 +248,16 @@
       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
       "dev": true
     },
+    "node_modules/@types/multiparty": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/@types/multiparty/-/multiparty-4.2.1.tgz",
+      "integrity": "sha512-Wi6aK3FgvHLvCDxD7ngG4w8MsCK9h64EB53Gvc8t7FVX81tleiz8vFS3ebBohGxqHRzNGHaNwhfdxTGOGAXm6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "16.18.105",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-16.18.105.tgz",
@@ -4007,6 +4018,15 @@
       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
       "dev": true
     },
+    "@types/multiparty": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/@types/multiparty/-/multiparty-4.2.1.tgz",
+      "integrity": "sha512-Wi6aK3FgvHLvCDxD7ngG4w8MsCK9h64EB53Gvc8t7FVX81tleiz8vFS3ebBohGxqHRzNGHaNwhfdxTGOGAXm6A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/node": {
       "version": "16.18.105",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-16.18.105.tgz",

service/package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
+    "@types/multiparty": "^4.2.1",
     "@types/node": "^16.18.105",
     "cross-env": "^7.0.3",
     "ts-loader": "^6.0.4",

service/src/configs.ts

@@ -17,34 +17,34 @@ const serviceComfig = {
 /**
  * 端口号
  */
-exports.servicePort = serviceComfig.port
+export const servicePort = serviceComfig.port
 
 /**
  * 前端绘制页地址
  */
-exports.drawLink = isDev ? 'http://127.0.0.1:5173/draw' : serviceComfig.website + '/draw'
+export const drawLink = isDev ? 'http://127.0.0.1:5173/draw' : serviceComfig.website + '/draw'
 
 /**
  * 图片缓存目录位置，根据实际情况调整
  */
-exports.filePath = isDev ? process.cwd() + `/static/` : serviceComfig.filePath
+export const filePath = isDev ? process.cwd() + `/static/` : serviceComfig.filePath
 
 /**
  * 配置服务器端的chrome浏览器位置
  */
-exports.executablePath = isDev ? null : '/opt/google/chrome-unstable/chrome'
+export const executablePath = isDev ? null : '/opt/google/chrome-unstable/chrome'
 
 /**
  * 截图并发数上限
  */
-exports.maxNum = 2
+export const maxNum = 2
 
 /**
  * 截图队列的阈值，超出时请求将会被熔断
  */
-exports.upperLimit = 20
+export const upperLimit = 20
 
 /**
  * 多久释放浏览器驻留内存，单位：秒（多标签页版生效）
  */
-exports.releaseTime = 300
+export const releaseTime = 300

service/src/control/api.ts

@@ -7,7 +7,7 @@
  */
 let path = '/api'
 
-module.exports = {
+export default {
   SCREENGHOT: path + '/screenshots',
   PRINTSCREEN: path + '/printscreen',
   // 后端示例

service/src/control/router.ts

@@ -5,12 +5,12 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2024-08-12 13:40:13
  */
-const rExpress = require('express')
-const screenshots = require('../service/screenshots.ts')
-const fileService = require('../service/files.ts')
-const userService = require('../service/user.ts')
-const designService = require('../service/design.ts')
-const api = require('./api.ts')
+import rExpress from 'express'
+import screenshots from '../service/screenshots'
+import fileService from '../service/files'
+import userService from '../service/user'
+import designService from '../service/design'
+import api from './api'
 const rRouter = rExpress.Router()
 
 rRouter.get(api.SCREENGHOT, screenshots.screenshots)
@@ -23,4 +23,4 @@ rRouter.get(api.GET_MATERIAL, designService.getMaterial)
 rRouter.get(api.GET_PHOTOS, designService.getPhotos)
 rRouter.post(api.UPDATE_TEMPLATE, designService.saveTemplate)
 
-module.exports = rRouter
+export default rRouter

service/src/main.ts

@@ -5,13 +5,13 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2024-11-14 17:36:17
  */
-const express = require('express')
-const bodyParser = require('body-parser')
-const fs = require('fs')
-// const path = require('path')
-const router = require('./control/router.ts')
-const { filePath, servicePort } = require('./configs.ts')
-const handleTimeout = require('./utils/timeout.ts')
+
+import express from 'express'
+import bodyParser from 'body-parser'
+import fs from 'fs'
+import router from './control/router'
+import { filePath, servicePort } from './configs'
+import handleTimeout from './utils/timeout'
 
 const port = process.env.PORT || servicePort
 const app = express()

service/src/service/design.ts

@@ -6,18 +6,18 @@
  * @LastEditTime: 2024-08-17 11:22:42
  */
 import { Request, Response } from 'express'
-const fs = require('fs')
-const path = require('path')
-const axios = require('../utils/http.ts')
-const multiparty = require('multiparty')
-const { filePath } = require('../configs.ts')
-const { checkCreateFolder, randomCode, send } = require('../utils/tools.ts')
+import fs from 'fs'
+import path from 'path'
+import axios from '../utils/http'
+import multiparty from 'multiparty'
+import { filePath } from '../configs'
+import { checkCreateFolder, randomCode, send } from '../utils/tools'
 
 const FileUrl = 'http://localhost:7001/static/'
 
-module.exports = {
-  // design/list 获取模板列表（虚拟）
-  async getTemplates(req: any, res: Response) {
+
+// design/list 获取模板列表（虚拟）
+export async function getTemplates(req: any, res: Response) {
   /**
    * @api {get} /design/list 获取模板列表（虚拟）
    * @apiVersion 1.0.0
@@ -29,9 +29,10 @@ module.exports = {
     const list = fs.readFileSync(path.resolve(__dirname, tempPath), 'utf8')
     send.success(res, { list: JSON.parse(list) })
   } catch (error) {}
-  },
-  // design/temp 获取模板（虚拟）
-  async getDetail(req: any, res: Response) {
+}
+
+// design/temp 获取模板（虚拟）
+export async function getDetail(req: any, res: Response) {
   /**
    * @api {get} /design/list 获取模板（虚拟）
    * @apiVersion 1.0.0
@@ -43,9 +44,10 @@ module.exports = {
     const detail = fs.readFileSync(path.resolve(__dirname, dPath), 'utf8')
     send.success(res, JSON.parse(detail))
   } catch (error) {}
-  },
-  // design/material 获取素材（虚拟）
-  async getMaterial(req: any, res: any) {
+}
+
+// design/material 获取素材（虚拟）
+export async function getMaterial(req: any, res: any) {
   /**
    * @api {get} /design/material 获取素材（虚拟）
    * @apiVersion 1.0.0
@@ -58,9 +60,10 @@ module.exports = {
   } catch (error) {
     console.log(error)
   }
-  },
-  // design/imgs 获取照片素材（虚拟）
-  async getPhotos(req: any, res: any) {
+}
+
+// design/imgs 获取照片素材（虚拟）
+export async function getPhotos(req: any, res: any) {
   /**
    * @api {get} /design/imgs 获取照片素材（虚拟）
    * @apiVersion 1.0.0
@@ -71,9 +74,10 @@ module.exports = {
     const detail = fs.readFileSync(path.resolve(__dirname, `../mock/materials/photos/${cate}.json`), 'utf8')
     send.success(res, { list: JSON.parse(detail) })
   } catch (error) {}
-  },
-  // design/edit 保存模板（虚拟）
-  async saveTemplate(req: any, res: any) {
+}
+
+// design/edit 保存模板（虚拟）
+export async function saveTemplate(req: any, res: any) {
   /**
    * @api {post} /design/edit 保存模板（虚拟）
    * @apiVersion 1.0.0
@@ -110,7 +114,12 @@ module.exports = {
   } catch (error) {
     console.log(error)
   }
-  },
 }
 
-export {}
+export default {
+  getTemplates,
+  getDetail,
+  getMaterial,
+  getPhotos,
+  saveTemplate
+}

service/src/service/files.ts

@@ -12,9 +12,9 @@ const { checkCreateFolder, randomCode, copyFile, send } = require('../utils/tool
 
 const FileUrl = 'http://localhost:7001/static/'
 
-module.exports = {
-  // api/file/upload 上传接口
-  async upload(req: Request, res: Response) {
+
+// api/file/upload 上传接口
+export async function upload(req: Request, res: Response) {
   /**
    * @api {post} /api/file/upload 上传接口
    * @apiVersion 1.0.0
@@ -54,7 +54,6 @@ module.exports = {
         })
     }
   })
-  },
 }
 
-export {}
+export default { upload }

service/src/service/screenshots.ts

@@ -5,16 +5,13 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2024-08-17 11:23:58
  */
-const { saveScreenshot } = require('../utils/download-single.ts')
-const uuid = require('../utils/uuid.ts')
-const { filePath, upperLimit, drawLink } = require('../configs.ts')
-const { queueRun, queueList } = require('../utils/node-queue.ts')
+import { saveScreenshot } from '../utils/download-single'
+import uuid from '../utils/uuid'
+import { filePath, upperLimit, drawLink } from '../configs'
+import { queueRun, queueList } from '../utils/node-queue'
 // const path = require('path')
-const fs = require('fs')
 
-module.exports = {
-  async screenshots(req: any, res: any) {
-    /**
+/**
  * @api {get} api/screenshots 截图
  * @apiVersion 1.0.0
  * @apiGroup screenShot
@@ -30,6 +27,7 @@ module.exports = {
  * @apiParam {String} quality 可选, 质量
  * @apiParam {String|Number} index 可选, 下载哪个画板
  */
+export async function screenshots(req: any, res: any) {
   let { id, tempid, tempType, width, height, screenshot_url, type = 'file', size, quality, index = 0 } = req.query
   id == 'undefined' && (id = null)
   const url = (screenshot_url || drawLink) + `${id ? '?id=' : '?tempid='}`
@@ -56,9 +54,9 @@ module.exports = {
   } else {
     res.json({ code: 500, msg: '缺少参数，请检查' })
   }
-  },
-  async printscreen(req: any, res: any) {
-    /**
+}
+
+/**
  * @api {get} api/printscreen 全屏网页截图
  * @apiVersion 1.0.0
  * @apiGroup screenShot
@@ -75,12 +73,14 @@ module.exports = {
  * @apiParam {String} devices (可选) 套用设备预设，传该值则ua、width、height均会失效。eg: iPhone 6 所有预设：/src/utils/widget/Device.js
  * @apiParam {Number} scale (可选) 针对移动端的设备像素比(DPR) 整型范围 1~4，默认1
  */
+export async function printscreen(req: any, res: any) {
+  
   let { width = 375, height = 0, url, type = 'file', size, quality, prevent = false, ua, devices, scale, wait } = req.query
   const path = filePath + `screenshot_${new Date().getTime()}_${uuid()}.png`
   const thumbPath = type === 'cover' ? path.replace('.png', '.jpg') : null
 
   if (url) {
-      const sign = `${new Date().getTime()}_${uuid(8)}`
+    const sign = `${new Date().getTime()}_${uuid()}`
     req._queueSign = sign
     // console.log(url + id, path, thumbPath);
     if (queueList.length > upperLimit) {
@@ -104,7 +104,6 @@ module.exports = {
   } else {
     res.json({ code: 500, msg: '缺少参数，请检查' })
   }
-  },
 }
 
-export {}
+export default { printscreen, screenshots }

service/src/service/user.ts

@@ -12,7 +12,7 @@ const { checkCreateFolder, filesReader, send } = require('../utils/tools.ts')
 
 const FileUrl = 'http://localhost:7001/static/'
 
-module.exports = {
+export default {
   // design/user/image 获取用户上传列表（虚拟）
   async getUserImages(req: Request, res: Response) {
     /**
@@ -24,5 +24,3 @@ module.exports = {
     send.success(res, { list })
   },
 }
-
-export {}

service/src/utils/download-single.ts

@@ -15,7 +15,7 @@ const forceTimeOut = 60 // 强制超时时间，单位：秒
 const maxPXs = 4211840 // 超出此规格会触发限制器降低dpr，节省服务器资源
 const maximum = 5000 // 最大宽高限制，超过截断以防止服务崩溃
 
-const saveScreenshot = async (url: string, { path, width, height, thumbPath, size = 0, quality = 0, prevent, ua, devices, scale, wait }: any) => {
+export const saveScreenshot = async (url: string, { path, width, height, thumbPath, size = 0, quality = 0, prevent, ua, devices, scale, wait }: any) => {
   return new Promise(async (resolve: Function, reject: Function) => {
     let isPageLoad = false
     let browser: any = null
@@ -154,6 +154,5 @@ const saveScreenshot = async (url: string, { path, width, height, thumbPath, siz
   })
 }
 
-module.exports = { saveScreenshot }
+export default { saveScreenshot }
 
-export {}

service/src/utils/download.ts

@@ -13,7 +13,7 @@ const forceTimeOut = 60 // 强制超时时间，单位：秒
 let browser: typeof puppeteer = null
 let release: any = null
 
-const saveScreenshot = async (url: string, { path, width, height, thumbPath, size = 0, quality = 0, prevent, ua, devices, scale, wait }: any) => {
+export const saveScreenshot = async (url: string, { path, width, height, thumbPath, size = 0, quality = 0, prevent, ua, devices, scale, wait }: any) => {
   return new Promise(async (resolve: Function) => {
     // 启动浏览器
     if (!browser) {
@@ -123,6 +123,4 @@ async function autoScroll(page: any) {
   })
 }
 
-module.exports = { saveScreenshot }
-
-export {}
+export default { saveScreenshot }

service/src/utils/fs.ts

@@ -6,13 +6,12 @@
  * @LastEditTime: 2024-08-12 06:29:58
  */
 import fs from 'fs'
-const path = require('path')
-const imageSize = require('image-size')
-const { filePath: StaticPath } = require('../configs.ts')
+import path from 'path'
+import imageSize from 'image-size'
+import { filePath as StaticPath } from '../configs'
 const FileUrl = 'http://localhost:7001/static/'
 
-module.exports = {
-  copyFile(sourceFile: string, destinationFile: string): Promise<void> {
+export function copyFile(sourceFile: string, destinationFile: string): Promise<void> {
   return new Promise((resolve, reject) => {
     const readStream = fs.createReadStream(sourceFile)
     const writeStream = fs.createWriteStream(destinationFile)
@@ -31,9 +30,10 @@ module.exports = {
 
     readStream.pipe(writeStream)
   })
-  },
-  // 读取目录
-  filesReader(directoryPath: string) {
+}
+
+// 读取目录
+export function filesReader(directoryPath: string) {
   return new Promise((resolve) => {
     try {
       const files = fs.readdirSync(StaticPath + directoryPath)
@@ -62,9 +62,10 @@ module.exports = {
       console.error('Error reading directory:', err)
     }
   })
-  },
-  // 读取文件
-  readFile(directoryPath: string) {
+}
+
+// 读取文件
+export function readFile(directoryPath: string) {
   return new Promise((resolve) => {
     try {
       resolve(fs.readFileSync(StaticPath + directoryPath, 'utf8'))
@@ -72,7 +73,10 @@ module.exports = {
       console.error('Error reading file:', err)
     }
   })
-  },
 }
 
-export {}
+export default {
+  copyFile,
+  filesReader,
+  readFile,
+}

service/src/utils/http.ts

@@ -5,7 +5,7 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2024-08-12 13:59:34
  */
-const axios = require('axios')
+import axios from 'axios'
 
 const httpRequest = axios.create({
   maxContentLength: Infinity,
@@ -16,4 +16,4 @@ httpRequest.interceptors.response.use((config: any) => {
   return config.data
 })
 
-module.exports = httpRequest
+export default httpRequest

service/src/utils/node-queue.ts

@@ -10,7 +10,7 @@ interface Queue {
   sign?: string | number
 }
 
-const { maxNum } = require('../configs.ts')
+import { maxNum } from '../configs'
 const queueList: any = [] // 任务队列
 let curNum = 0 // 当前执行的任务数
 
@@ -38,4 +38,4 @@ function run(Fn: Function) {
   })
 }
 
-module.exports = { queueRun, queueList }
+export { queueRun, queueList }

service/src/utils/timeout.ts

@@ -6,7 +6,7 @@
  * @LastEditTime: 2023-07-05 20:17:00
  */
 
-module.exports = async (req: any, res: any, next: any) => {
+export default async (req: any, res: any, next: any) => {
   const { queueList } = require('../utils/node-queue.ts')
   const time = 30000 // 设置所有HTTP请求的服务器响应超时时间
   res.setTimeout(time, () => {

service/src/utils/tools.ts

@@ -5,12 +5,11 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2024-08-12 13:48:40
  */
-const fs = require('fs')
-const path = require('path')
-const fsFunc = require('./fs.ts')
+import fs from 'fs'
+import path from 'path'
+import { filesReader, copyFile, readFile } from './fs'
 
-module.exports = {
-  send: {
+export const send = {
   success: (res: any, result: any, msg: string = 'ok') => {
     res.json({
       code: 200,
@@ -24,14 +23,17 @@ module.exports = {
       msg,
     })
   },
-  },
-  isNumber: (value: any) => {
+}
+export const isNumber = (value: any) => {
   return typeof value === 'number' && !isNaN(value)
-  },
-  buildTree: (data: any[]) => {},
-  groupBy: (array: any[], property: any) => {},
-  // 检测目录并创建目录（支持深层级）
-  checkCreateFolder: (folder: string) => {
+}
+
+export const buildTree = (data: any[]) => {}
+
+export const groupBy = (array: any[], property: any) => {}
+
+// 检测目录并创建目录（支持深层级）
+export const checkCreateFolder = (folder: string) => {
   try {
     const pathArr = splitPath(folder)
     let _path = ''
@@ -42,9 +44,10 @@ module.exports = {
       }
     }
   } catch (e) {}
-  },
-  // 检测文件
-  checkCreateFile: (filePath: string) => {
+}
+
+// 检测文件
+export const checkCreateFile = (filePath: string) => {
   try {
     if (!fs.existsSync(filePath)) {
       fs.writeFileSync(filePath, '')
@@ -52,9 +55,10 @@ module.exports = {
   } catch (e) {
     fs.writeFileSync(filePath, '')
   }
-  },
-  // 生成随机码
-  randomCode: (length = 5) => {
+}
+
+// 生成随机码
+export const randomCode = (length = 5) => {
   const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
   let result = ''
   for (let i = 0; i < length; i++) {
@@ -62,14 +66,15 @@ module.exports = {
     result += chars[randomIndex]
   }
   return result
-  },
-  // 取数组差集
-  findDifference: (a: any, b: any) => {
-    return a.concat(b).filter((v: any) => !a.includes(v) || !b.includes(v))
-  },
-  ...fsFunc,
 }
 
+// 取数组差集
+export const findDifference = (a: any, b: any) => {
+  return a.concat(b).filter((v: any) => !a.includes(v) || !b.includes(v))
+}
+
+export { copyFile, readFile, filesReader }
+
 /**
  * 将路径切割为数组
  * @param dirPath
@@ -81,4 +86,3 @@ function splitPath(dirPath: string) {
   return normalizedPath.split(separator)
 }
 
-export {}

service/src/utils/uuid.ts

@@ -7,9 +7,9 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
-const nodeCrypto = require('crypto');
+import nodeCrypto from 'crypto';
 
-module.exports = () =>
+export default () =>
   // @ts-ignore
   ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: number) =>
     (c ^ (nodeCrypto.randomBytes(1)[0] & (15 >> (c / 4)))).toString(16)

service/tsconfig.json

@@ -3,7 +3,7 @@
     /* Basic Options */
     // "incremental": true,                   /* Enable incremental compilation */
     "target": "ESNEXT",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "module": "ESNext",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     // "lib": ["dom", "es2015"],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */

service/webpack.config.js

@@ -39,6 +39,12 @@ module.exports = {
       },
     ],
   },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'],  // 解析的文件类型
+    alias: {
+      '@': path.resolve(__dirname, 'src')  // 配置路径别名，指向 src 目录
+    }
+  },
   // plugins: [new BundleAnalyzerPlugin()],
   plugins: [ new buildPlugin() ]
 }