⛳ chore: upgrade to ESM (#93)

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,34 @@
+{
+  "editor.formatOnSave": false,
+
+  // Auto fix
+
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never",
+		"source.fixAll.stylelint": "explicit"
+  },
+  "eslint.run": "onType",
+  "eslint.format.enable": true,
+  "css.validate": false,
+	"less.validate": false,
+
+	"files.autoSaveDelay": 500,
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "gql",
+    "graphql"
+  ]
+}

README-en.md

@@ -13,7 +13,7 @@ Playwright repo: [koa-playwright-server](https://github.com/pdsuwwz/koa-playwrig
 
 ## Introduction
 
-🦩 Koa + TypeScript + Rollup + Nodemon + Puppeteer
+🦩 Koa + ESM + TypeScript + Rollup + Nodemon + Puppeteer + ESLint (v9)
 
 > * Fast Generate into PDF and images from any webpage.
 >
@@ -22,13 +22,15 @@ Playwright repo: [koa-playwright-server](https://github.com/pdsuwwz/koa-playwrig
 
 ## ✨ Features
 
+* ✅ Built-in ES Module + TypeScript environment
+
 * 🌈 Separation business logic and Controllers.
 
 * 🛡 Probably the best practice for Puppeteer project.
 
 * 🧩 Configured routing.
 
-* 🚧 Eslint configuration.
+* 🚧 Eslint (v9) configuration.
 
 * ⚡ Fast build with Rollup.
 
@@ -51,7 +53,7 @@ Playwright repo: [koa-playwright-server](https://github.com/pdsuwwz/koa-playwrig
 
 ## 🎯 Prerequisites
 
-Please make sure that [Node.js](https://nodejs.org/) (>= 10.18.1) is installed on your operating system.
+Please make sure that [Node.js](https://nodejs.org/) (>= 20.x) is installed on your operating system.
 
 ## Project structure
 
@@ -93,7 +95,9 @@ pnpm build
 * Run
 
 ```bash
-pnpm start
+pnpm start # PORT is 8080
+# or
+node dist/bundle.esm.js # PORT is 5000
 ```
 
 ## API
@@ -133,7 +137,7 @@ curl --location --request POST 'http://localhost:5000/pdf' \
 
 👆 /pdf request parameters
 
-| 字段 | 说明 | 类型 | 默认值 |
+| Field | Description | Type | Default Value |
 | -------- | -------- | -------- | -------- |
 | url | Target site url | string | — |
 | cookies | Generally used as a website that requires login to access, you can add this field | Array<{ name, value, domain }> | [] |
@@ -151,7 +155,7 @@ See [Merge Test 1](__test__/axios-browser.html), [Merge Test 2](__test__/axios-n
 
 👆 /combine-pdf request parameters
 
-| 字段 | 说明 | 类型 | 默认值 |
+| Field | Description | Type | Default Value |
 | -------- | -------- | -------- | -------- |
 | pdfList | A collection of target websites, the parameter type is an array, and each item in the array is a parameter required by `/pdf` | Array<{ pdfItem }> | [] |
 

README.md

@@ -13,21 +13,23 @@ Playwright 仓库: [koa-playwright-server](https://github.com/pdsuwwz/koa-playwr
 
 ## 介绍
 
-🦩 Koa + TypeScript + Rollup + Nodemon + Puppeteer
+🦩 Koa + ESM + TypeScript + Rollup + Nodemon + Puppeteer + ESLint (v9)
 
 > * 能够将任意网页快速生成为 PDF、图片。
 >
 > * 支持将多个网页合并，并最终生成一个 PDF 文件，支持 Cookie 的注入、PDF 水印的添加和页眉页脚的插入。
 
 ## ✨ 特性
 
+* ✅ 自带 TypeScript + ES Module 环境
+
 * 🌈 解耦了业务层和控制层
 
 * 🛡 可能是 Puppeteer 项目的最佳实践
 
 * 🧩 可配置的路由
 
-* 🚧 内置 Eslint 语法风格检查
+* 🚧 内置 Eslint (v9) 语法风格检查
 
 * ⚡ 使用 Rollup 快速构建
 
@@ -50,7 +52,7 @@ Playwright 仓库: [koa-playwright-server](https://github.com/pdsuwwz/koa-playwr
 
 ## 🎯 前序准备
 
-请确保安装了 [Node.js](https://nodejs.org/)(>= 10.18.1)
+请确保安装了 [Node.js](https://nodejs.org/)(>= 20.x)
 
 
 ## 项目结构
@@ -93,7 +95,9 @@ pnpm build
 * 运行
 
 ```bash
-pnpm start
+pnpm start # 端口号为 8080
+# 或直接运行
+node dist/bundle.esm.js # 端口号为 5000
 ```
 
 ## 核心接口

__test__/axios-browser.html

@@ -4,7 +4,25 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Puppeteer Test Server</title>
+  <style>
+    .hide {
+      display: none;
+    }
+    .show {
+      display: block;
+    }
+    .code-box {
+      border: 1px solid red;
+    }
+    .code-inline {
+      code {
+        background-color: #eee;
+        border-radius: 5px;
+        padding: 3px 7px;
+      }
+    }
+  </style>
 </head>
 <body>
   <code>
@@ -25,17 +43,24 @@
     ]
   </code>
   <h2>正在爬取👆网站并完成合并pdf的过程，请等待几秒钟，浏览器将自动打开下载窗口</h2>
-  <h2>Please wait a few seconds for your browser to automatically open the download window</h2>
+  <h2>Please wait a few seconds while we crawl the above websites and complete the PDF merge process. The browser will automatically open the download window.</h2>
+  <div id="error-box" class="code-box code-inline hide"></div>
 
-  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.2/axios.js"></script>
+  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
   <script>
+    const PORT = 5000
+    // const PORT = 8080
     const service = axios.create({
-      baseURL: 'http://localhost:5000',
+      baseURL: `http://localhost:${PORT}`,
       timeout: 60000
     });
     const pdfList = [
       {
         url: 'https://github.com/pdsuwwz',
+        attachment: {
+          header: '自定义的页眉',
+          footer: '自定义的页脚'
+        },
       },
       {
         url: 'https://vuejs.org/api/',
@@ -65,8 +90,8 @@ <h2>Please wait a few seconds for your browser to automatically open the downloa
         // 展示自定义页眉页脚，前提是需要将 hasMargin 设置为 true
         // Display the custom header and footer, provided that hasMargin is set to true
         attachment: {
-          header: 'ABC股份有限公司2020年度财务舞弊识别报告 — 实施阶段',
-          footer: 'BJ202107260001-AFCJ-01'
+          header: '这是页眉-ABC股份有限公司xxxx年度xxxx报告 — xx阶段',
+          footer: '这是页脚-BJxxxx07260001-AFCJ-01'
         },
         // 生成出来的 PDF 是否为横向
         // Whether the generated PDF is horizontal
@@ -94,6 +119,16 @@ <h2>Please wait a few seconds for your browser to automatically open the downloa
       document.body.appendChild(link)
       link.click()
       document.body.removeChild(link)
+    }).catch((err) => {
+      const errBox = document.querySelector('#error-box')
+
+      errBox.innerHTML = `
+        <p>Node.js 服务报错或未运行，请运行 <code>pnpm start</code> 或 <code>node dist/bundle.esm.js</code> 或 <code>node __test__/axios-node.js</code> 后再试，或请检查服务运行情况。</p>
+        <p>Node.js service encountered an error or is not running. Please run <code>pnpm start</code> or <code>node dist/bundle.esm.js</code> or <code>node __test__/axios-node.js</code> check the service status and try again .</p>
+      `
+
+      errBox.classList.add('show')
+      console.log(err)
     })
   </script>
 </body>

__test__/axios-node.js

@@ -1,23 +1,23 @@
-const axios = require('axios')
-const fs = require('fs')
+import axios from 'axios'
+import fs from 'fs'
+
+const PORT = 5000
+// const PORT = 8080
 
 const service = axios.create({
-  baseURL: 'http://localhost:5000'
+  baseURL: `http://localhost:${ PORT }`
 })
 
 
-service({
-  method: 'post',
-  url: '/combine-pdf',
-  responseType: 'arraybuffer',
-  data: {
+const init = () => {
+  service.post('/combine-pdf', {
     pdfList: [
       {
-        url: 'https://www.google.com/',
+        url: 'https://www.baidu.com/',
         isLandscape: true,
         attachment: {
           header: 'Header 自定义页眉',
-          footer: 'Footer 自定义页脚',
+          footer: 'Footer 自定义页脚'
         }
       },
       {
@@ -33,7 +33,13 @@ service({
         ]
       }
     ]
-  }
-}).then((res) => {
-  fs.writeFileSync('combime-test1.pdf', res.data)
-})
+  }, {
+    responseType: 'arraybuffer'
+  }).then((res) => {
+    fs.writeFileSync('combime-test1.pdf', res.data)
+  }).catch((err) => {
+    console.log(err)
+  })
+}
+
+init()

babel.config.js → babel.config.ts

@@ -2,11 +2,16 @@
  * Configuration for development environment only
  */
 
-const { getPresetsEnv } = require('./babel.presets')
+export default {
 
-module.exports = {
   presets: [
-    getPresetsEnv(),
+    '@babel/preset-env', {
+      targets: {
+        node: 'current'
+      },
+      // https://github.com/babel/babel/issues/10374#issuecomment-597029696
+      modules: 'auto'
+    },
     '@babel/preset-typescript'
   ],
   plugins: [

ecosystem.config.js → ecosystem.config.cjs

@@ -5,7 +5,7 @@ module.exports = {
   apps: [
     {
       name,
-      script: path.resolve(__dirname, './dist/bundle.cjs.js'),
+      script: path.resolve(__dirname, './dist/bundle.commonjs.cjs'),
       instances: require('os').cpus().length,
       autorestart: true,
       watch: true,