pt-plugins / PT-Plugin-Plus

PT 助手 Plus,为 Microsoft Edge、Google Chrome、Firefox 浏览器插件(Web Extensions),主要用于辅助下载 PT 站的种子。
MIT License
6.91k stars 851 forks source link

build: upgrade toolchain #1825

Closed trim21 closed 6 months ago

trim21 commented 6 months ago

把编译工具链升级到vite和webpack5

之前的vue-cli已经弃用了,有的依赖已经无法在node20(current lts)上安装了。

本PR升级了编译工具链,把ci的版本也升级到了node20.

可以正常构建,但是还有一些升级ts导致的类型问题,以及升级eslint导致的lint错误。如果修复的话会导致修改非常多的文件,所以等后面再修复。

Rhilip commented 6 months ago

麻烦考虑并入以下patch

  1. vue.config.js 是vue-cli的配置文件,纯套用vite和webpack作为构建工具的时候不再需要
  2. terser-webpack-plugin 在webpack 5中已经内置 我个人暂时认为不再需要单独声明该组件,继续保留问题也不大
  3. TechnologyStack页面 会因为使用 require('package.json') 而无法进入,直接使用json导入并修改对应的ts配置。同时 https://registry.npm.taobao.org/ 也已迁移域名,做了更新
Subject: [PATCH] patch
---
Index: vue.config.js
===================================================================
diff --git a/vue.config.js b/vue.config.js
deleted file mode 100644
--- a/vue.config.js (revision 16340a187ff843d854a379d258f32ed50d79a9ed)
+++ /dev/null   (revision 16340a187ff843d854a379d258f32ed50d79a9ed)
@@ -1,21 +0,0 @@
-module.exports = {
-  pages: {
-    index: {
-      // page 的入口
-      entry: "src/options/main.ts",
-      title: "PT-Plugin-Plus"
-    },
-    // 调试页面
-    debugger: {
-      entry: "src/debugger/index.ts",
-      title: "PT-Plugin-Plus Debugger"
-    }
-  },
-  productionSourceMap: false,
-  configureWebpack: {
-    optimization: {
-      // 打包为 Chrome 商店版时不对代码进行压缩混淆
-      minimize: !process.env.CHROME_WEB_STORE
-    }
-  }
-};
Index: tsconfig.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/tsconfig.json b/tsconfig.json
--- a/tsconfig.json (revision 16340a187ff843d854a379d258f32ed50d79a9ed)
+++ b/tsconfig.json (date 1714907953235)
@@ -7,6 +7,8 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "resolvePackageJsonImports": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
Index: package.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/package.json b/package.json
--- a/package.json  (revision 16340a187ff843d854a379d258f32ed50d79a9ed)
+++ b/package.json  (date 1714908449528)
@@ -78,7 +78,6 @@
     "git-rev-sync": "^3.0.2",
     "sass": "^1.75.0",
     "sass-loader": "^14.2.1",
-    "terser-webpack-plugin": "^5.3.10",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",
     "vue-template-compiler": "~2.7.0",
Index: webpack/common.cjs
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/webpack/common.cjs b/webpack/common.cjs
--- a/webpack/common.cjs    (revision 16340a187ff843d854a379d258f32ed50d79a9ed)
+++ b/webpack/common.cjs    (date 1714908317184)
@@ -1,8 +1,4 @@
 const path = require("path");
-// 因第三方库中可能会包含一些特殊字符,导致编译后 Chrome 无法加载的问题,故引入 terser-webpack-plugin 插件
-// Chrome 会报以下错误:无法为内容脚本加载“xxx.js”文件。该文件采用的不是 UTF-8 编码。
-// @see https://stackoverflow.com/questions/55601774/chrome-extension-has-a-content-js-error-about-utf-8
-const TerserPlugin = require("terser-webpack-plugin");

 // 用于替换 @ 符号的路径
 function resolve(dir) {
@@ -39,14 +35,6 @@
     },
     // 打包为 Chrome 商店版时不对代码进行压缩混淆
     minimize: !process.env.CHROME_WEB_STORE,
-    minimizer: [
-      new TerserPlugin({
-        // 防止因编码问题导致Chrome无法加载插件
-        terserOptions: {
-          output: {ascii_only: true}
-        }
-      })
-    ]
   },
   module: {
     rules: [
Index: src/options/views/TechnologyStack.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/src/options/views/TechnologyStack.vue b/src/options/views/TechnologyStack.vue
--- a/src/options/views/TechnologyStack.vue (revision 16340a187ff843d854a379d258f32ed50d79a9ed)
+++ b/src/options/views/TechnologyStack.vue (date 1714908042658)
@@ -28,8 +28,8 @@
 </template>
 <script lang="ts">
 import Vue from "vue";
+import {dependencies as rawDependencies} from "@/../package.json";

-const rawDependencies = require('@/../package.json').dependencies;
 const dependencies = Object.entries(rawDependencies).map(value => {
   const [name, version] = value
   return {
@@ -74,7 +74,7 @@
             url = cacheDependMetaData[name]
           } else {
             try {
-              const req = await fetch(`https://registry.npm.taobao.org/${name}`)
+              const req = await fetch(`https://registry.npmmirror.com/${name}`)
               const data = await req.json()
               if (data?.homepage) {
                 url = cacheDependMetaData[name] = data?.homepage