feat: 新增rspack构建工具 (#156)

* feat: 新增rspack构建工具 * fix: 检视意见修改
opentiny · Aug 11, 2024 · 41d1add · 41d1add
1 parent 6e3ec5a
commit 41d1add
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 8 deletions.
diff --git a/packages/toolkits/pro/template/tinyvue/package.json b/packages/toolkits/pro/template/tinyvue/package.json
@@ -10,6 +10,8 @@
     "build": "vite build --config ./config/vite.config.prod.ts",
     "build:wp": "webpack --config webpack.config.js",
     "dev:wp": "webpack-dev-server --progress --config webpack.config.js",
+    "dev:rp": "rspack serve",
+    "build:rp": "rspack build",
     "report": "cross-env REPORT=true npm run build",
     "lint-staged": "npx lint-staged",
     "prepare": "git init && husky install",
@@ -56,13 +58,16 @@
     "vue": "^3.3.7",
     "vue-eslint-parser": "^9.3.2",
     "vue-i18n": "^9.6.2",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-style-loader": "^4.1.3"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.24.7",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^12.0.1",
+    "@rspack/cli": "^0.7.5",
+    "@rspack/core": "^0.7.5",
     "@types/lodash": "^4.14.177",
     "@types/nprogress": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "^5.10.0",

diff --git a/packages/toolkits/pro/template/tinyvue/rspack.config.js b/packages/toolkits/pro/template/tinyvue/rspack.config.js
@@ -0,0 +1,155 @@
+const {resolve} = require('path');
+const { VueLoaderPlugin } = require('vue-loader')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const rspack = require('@rspack/core');
+const {configDotenv,parse} = require('dotenv');
+const { default: importMetaLoader } = require('import-meta-loader');
+configDotenv({
+  path:'./.env'
+})
+
+/** @type {import('@rspack/cli').Configuration} */
+const config = {
+  context: __dirname,
+  entry: {
+    main: './src/main.ts',
+  },
+  experiments: {
+    css: true
+  },
+  plugins:[
+    new VueLoaderPlugin(),
+    new rspack.HtmlRspackPlugin({
+      template: './index.html',
+    }),
+    new rspack.DefinePlugin({
+      __VUE_OPTIONS_API__: JSON.stringify(true),
+      __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
+      'import.meta.env.VITE_CONTEXT': '"/vue-pro/"',
+      'import.meta.env.VITE_BASE_API': '"/api"',
+      'import.meta.env.VITE_SERVER_HOST': '"http://127.0.0.1:3000"',
+      'import.meta.env.VITE_MOCK_HOST': '"http://127.0.0.1:8848"',
+      'import.meta.env.VITE_USE_MOCK': 'false',
+      'import.meta.env.VITE_MOCK_IGNORE': '"/api/user/userInfo,/api/user/login,/api/user/register,/api/employee/getEmployee"',
+      'import.meta.env.VITE_MOCK_SERVER_HOST': '"/mock"',
+    })
+  ],
+  devServer: {
+    historyApiFallback: true,
+    proxy:[
+      {
+        context: [process.env.VITE_BASE_API],
+        target: process.env.VITE_SERVER_HOST,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      },
+      {
+        context: [process.env.VITE_MOCK_SERVER_HOST],
+        target: process.env.VITE_MOCK_HOST,
+        changeOrigin: true,
+        pathRewrite:{
+          '^/mock': ''
+        }
+      }
+    ]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          experimentalInlineMatchResource: true,
+        },
+      },
+      {
+        test: /\.ts$/,
+        loader: 'builtin:swc-loader',
+        options: {
+          sourceMap: true,
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+            },
+          },
+        },
+        type: 'javascript/auto',
+      },
+      {
+        test: /\.less$/,
+        loader: 'less-loader',
+        type: 'css',
+      },
+      {
+        test: /\.svg$/,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false
+        }
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'less-loader',
+            options:{
+              additionalData: `@import "${resolve('./src/assets/style/breakpoint.less')}";`
+            }
+          },
+        ],
+        type: "css"
+      },
+      {
+        test:/.(png|jpg|jpeg|gif|svg)$/, // 匹配图片文件
+        type: "asset", // type选择asset
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10 * 1024, // 小于10kb转base64位
+          }
+        },
+        generator:{
+          filename:'static/images/[name].[contenthash:8][ext]', // 文件输出目录和命名
+        },
+      },
+      {
+        test:/.(woff2?|eot|ttf|otf)$/, // 匹配字体图标文件
+        type: "asset", // type选择asset
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10 * 1024, // 小于10kb转base64位
+          }
+        },
+        generator:{
+          filename:'static/fonts/[name].[contenthash:8][ext]', // 文件输出目录和命名
+        },
+      },
+      {
+        test:/.(mp4|webm|ogg|mp3|wav|flac|aac)$/, // 匹配媒体文件
+        type: "asset", // type选择asset
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10 * 1024, // 小于10kb转base64位
+          }
+        },
+        generator:{
+          filename:'static/media/[name].[contenthash:8][ext]', // 文件输出目录和命名
+        },
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+      'assets': resolve(__dirname, 'src/assets'),
+      'vue-i18n$': 'vue-i18n/dist/vue-i18n.esm-bundler.js',
+      'vue$': 'vue/dist/vue.esm-bundler.js'
+    },
+    extensions: ['.ts', '.js', '.vue'],
+  },
+}
+module.exports = config;
diff --git a/packages/toolkits/pro/template/tinyvue/src/router/guard/menu.ts b/packages/toolkits/pro/template/tinyvue/src/router/guard/menu.ts
@@ -24,9 +24,9 @@ export interface ITreeNodeData {
   // 国际化
   locale: string;
 }
-
-const views = import.meta.glob('../../views/**/*.vue');
-
+const reg = /\.vue$/gim;
+const views = import.meta.glob ? import.meta.glob('../../views/**/*.vue') : require.context('../../views', true, reg, 'sync');
+console.log(views)
 const toRoutes = (menus: ITreeNodeData[]) => {
   const router: RouteRecordRaw[] = [];
   for (let i=0;i<menus.length;i+=1) {

diff --git a/packages/toolkits/pro/template/tinyvue/src/router/routes/index.ts b/packages/toolkits/pro/template/tinyvue/src/router/routes/index.ts
@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-const modules = import.meta.glob('./modules/*.ts', { eager: true });
+const modules = import.meta.glob ? import.meta.glob('./modules/*.ts', { eager: true }) : require.context('./module', false, /\.ts$/, 'sync')
 const appRoutes: RouteRecordRaw[] = [];
 
 Object.keys(modules).forEach((key) => {

diff --git a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue
@@ -77,8 +77,6 @@
   const userStore = useUserStore();
   const loginFormMail = ref();
 
-  const views = import.meta.glob('../../**/*.vue');
-
   const rules = computed(() => {
     return {
       mailname: [

diff --git a/packages/toolkits/pro/template/tinyvue/webpack.config.js b/packages/toolkits/pro/template/tinyvue/webpack.config.js
@@ -128,7 +128,6 @@ module.exports = {
       'import.meta.env.VITE_USE_MOCK': 'false',
       'import.meta.env.VITE_MOCK_IGNORE': '"/api/user/userInfo,/api/user/login,/api/user/register,/api/employee/getEmployee"',
       'import.meta.env.VITE_MOCK_SERVER_HOST': '"/mock"',
-
     })
   ],
   resolve: {