浏览代码

feat:work-bench构建工具改为vite

yangfeng 9 月之前
父节点
当前提交
e83bc8e0a8

+ 1 - 1
apps/work-bench/config/dev-proxy.js

@@ -50,7 +50,7 @@ const ProxyPrefixs = [
 // 最终代理配置
 // 最终代理配置
 const proxy = {
 const proxy = {
   '/api/jyapi/jybx': {
   '/api/jyapi/jybx': {
-    target: ProxyTargets['开发环境'],
+    target: ProxyTargets['测试环境'],
     changeOrigin: true,
     changeOrigin: true,
     logLevel: 'debug',
     logLevel: 'debug',
     pathRewrite: {
     pathRewrite: {

+ 25 - 0
apps/work-bench/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/assets/iconfont/pc/24.10.15/iconfont.css">
+    <title>工作台</title>
+   
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script src="https://cdn-common.jianyu360.com/cdn/assets/iconfont/pc/24.10.15/iconfont.js"></script>
+    <script src="//cdn-common.jianyu360.com/cdn/lib/jquery/3.5.1/jquery.min.js"></script>
+
+   
+
+    <!-- built files will be auto injected -->
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

+ 15 - 13
apps/work-bench/package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "version": "0.1.0",
   "private": true,
   "private": true,
   "scripts": {
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "pnpm run update && pnpm run build:vite",
+    "build:vite": "vite build",
+    "preview": "vite preview --port 4173",
+    "lint": "eslint . --fix",
+    "format": "prettier --write \"./**/*.{,vue,ts,js,json,md}\""
   },
   },
   "dependencies": {
   "dependencies": {
     "@jianyu/easy-inject-iframe": "^0.1.0",
     "@jianyu/easy-inject-iframe": "^0.1.0",
@@ -23,12 +26,6 @@
     "@babel/core": "^7.12.16",
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "@vue/eslint-config-standard": "^6.1.0",
     "eslint": "^7.32.0",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-node": "^11.1.0",
@@ -37,14 +34,19 @@
     "mockjs": "^1.1.0",
     "mockjs": "^1.1.0",
     "sass": "^1.32.7",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "sass-loader": "^12.0.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "@vitejs/plugin-legacy": "^4.0.4",
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "vite": "^4.5.3",
+    "vite-plugin-ejs": "1.6.4",
+    "vite-plugin-externals": "^0.6.2",
+    "vite-plugin-legacy-qiankun": "^0.0.12"
   },
   },
   "lint-staged": {
   "lint-staged": {
     "src/*": [
     "src/*": [
       "prettier --write --cache --ignore-unknown"
       "prettier --write --cache --ignore-unknown"
-    ],
-    "src/*.js": [
-      "vue-cli-service lint --fix"
     ]
     ]
   }
   }
 }
 }

+ 3 - 3
apps/work-bench/src/api/interceptors.js

@@ -1,11 +1,11 @@
 import service from './service'
 import service from './service'
 import { Notification } from 'element-ui'
 import { Notification } from 'element-ui'
 
 
-const debug = process.env.NODE_ENV !== 'production'
-const AppID = process.env.VUE_APP_ID
+const debug = import.meta.env.NODE_ENV !== 'production'
+const AppID = import.meta.env.VUE_APP_ID
 
 
 if (debug) {
 if (debug) {
-  console.log('[debug]当前环境:', process.env)
+  console.log('[debug]当前环境:', import.meta.env)
 }
 }
 
 
 service.interceptors.request.use(config => {
 service.interceptors.request.use(config => {

+ 2 - 2
apps/work-bench/src/api/mock/index.js

@@ -6,7 +6,7 @@ import { addMockModules } from './module'
  * @param options
  * @param options
  */
  */
 function addMock (options) {
 function addMock (options) {
-  const BaseAPI = process.env.VUE_APP_BASE_API
+  const BaseAPI = import.meta.env.VUE_APP_BASE_API
   Mock.mock(BaseAPI + options.url, options.method, (option) => Mock.mock(options.data(option)))
   Mock.mock(BaseAPI + options.url, options.method, (option) => Mock.mock(options.data(option)))
 }
 }
 
 
@@ -17,6 +17,6 @@ function registeredInterceptor () {
   addMockModules().forEach(mock => addMock(mock))
   addMockModules().forEach(mock => addMock(mock))
 }
 }
 
 
-if (process.env.VUE_APP_API_MOCK === 'true') {
+if (import.meta.env.VUE_APP_API_MOCK === 'true') {
   registeredInterceptor()
   registeredInterceptor()
 }
 }

+ 1 - 1
apps/work-bench/src/api/mock/module.js

@@ -1,4 +1,4 @@
-const mockContext = require.context('./modules', true, /\.js$/)
+const mockContext = import.meta.globEager('./modules/*.js')
 
 
 /**
 /**
  * 遍历 modules 插入 mock 配置
  * 遍历 modules 插入 mock 配置

+ 1 - 1
apps/work-bench/src/api/service.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
 import axios from 'axios'
 
 
 export default axios.create({
 export default axios.create({
-  baseURL: process.env.VUE_APP_BASE_API
+  baseURL: import.meta.env.VUE_APP_BASE_API
 })
 })

+ 29 - 5
apps/work-bench/src/main.js

@@ -6,13 +6,37 @@ import store from './store'
 import App from './App.vue'
 import App from './App.vue'
 import { microAppsStart } from './register-app'
 import { microAppsStart } from './register-app'
 import '@jianyu/reset.css/reset-pc.scss'
 import '@jianyu/reset.css/reset-pc.scss'
+import { createLifecyle, getMicroApp } from 'vite-plugin-legacy-qiankun'
+import pkg from '../package.json'
+const microApp = getMicroApp(pkg.name)
+console.log(microApp, 'microApp')
+console.log(pkg.name, createLifecyle, 'createLifecyle')
 
 
 Vue.config.productionTip = false
 Vue.config.productionTip = false
 
 
 microAppsStart()
 microAppsStart()
 
 
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')
+const render = (container) => {
+  new Vue({
+    router,
+    store,
+    render: (h) => h(App)
+  }).$mount(container?. querySelector('#app') ?? '#app')
+}
+
+if (microApp.__POWERED_BY_QIANKUN__) {
+  createLifecyle(pkg.name, {
+    mount(props) {
+      console.log('mount', pkg.name);
+      render(props.container);
+    },
+    bootstrap() {
+      console.log('bootstrap', pkg.name);
+    },
+    unmount() {
+      console.log('unmount', pkg.name)
+    }
+  })
+} else {
+  render()
+}

+ 1 - 1
apps/work-bench/src/register-app.js

@@ -103,7 +103,7 @@ export const subApps = {
     describe: '该应用包含大会员画像、推送、周报月报、个人桌面等功能',
     describe: '该应用包含大会员画像、推送、周报月报、个人桌面等功能',
     qiankun: {
     qiankun: {
       name: 'bigMemberSubApp',
       name: 'bigMemberSubApp',
-      entry: '/page_big_pc/index.html',
+      entry: '//localhost:8081',
       rule: '/big',
       rule: '/big',
       props: {
       props: {
         inject: ({ Vue, router }) => {
         inject: ({ Vue, router }) => {

+ 8 - 13
apps/work-bench/src/router/module.js

@@ -1,22 +1,17 @@
-const routerContext = require.context('./modules', true, /\.js$/)
+const routerContext = import.meta.globEager('./modules/*.js')
 
 
 export function addModules (routes = []) {
 export function addModules (routes = []) {
-  routerContext.keys().forEach(route => {
-    if (route.startsWith('./index')) {
-      return
-    }
-    const moduleName = route.replace(/.\/(.*)\.js$/, '$1')
-    const routerModule = routerContext(route).default
-    routerModule.forEach(v => {
+  for (const path in routerContext) {
+    const moduleName = path.replace(/(.*\/)*([^.]+).*/ig, '$2')
+    if (path.startsWith('./index')) continue
+    const module = routerContext[path]
+    module.default.forEach((v) => {
       v.path = `/${moduleName}${v.path}`
       v.path = `/${moduleName}${v.path}`
       if (v.name) {
       if (v.name) {
         v.name = `${moduleName}-${v.name}`
         v.name = `${moduleName}-${v.name}`
       }
       }
-      if (v.alias) {
-        v.alias = `/${moduleName}${v.alias}`
-      }
     })
     })
-    routes = routes.concat(routerModule.default || routerModule)
-  })
+    routes = routes.concat(module.default || module)
+  }
   return routes
   return routes
 }
 }

+ 3 - 2
apps/work-bench/src/router/router.js

@@ -16,16 +16,17 @@ let routes = [
     component: NotFindPage
     component: NotFindPage
   }
   }
 ]
 ]
-routes = addModules(routes)
 
 
 routes.push({
 routes.push({
   path: '*',
   path: '*',
   redirect: '/404'
   redirect: '/404'
 })
 })
 
 
+routes = addModules(routes)
+
 const createRouter = () => new VueRouter({
 const createRouter = () => new VueRouter({
   mode: 'history',
   mode: 'history',
-  base: process.env.VUE_APP_BASE_URL,
+  base: import.meta.env.VUE_APP_BASE_URL,
   scrollBehavior: () => ({ x: 0, y: 0 }),
   scrollBehavior: () => ({ x: 0, y: 0 }),
   routes
   routes
 })
 })

+ 5 - 5
apps/work-bench/src/store/module.js

@@ -1,14 +1,14 @@
-const storeContext = require.context('./modules', true, /\.js$/)
+const storeContext = import.meta.globEager('./modules/*.js')
 
 
 export function addModules (stores = {}) {
 export function addModules (stores = {}) {
-  storeContext.keys().forEach(route => {
+  Object.entries(storeContext).forEach(([route, v]) => {
     if (route.startsWith('./index')) {
     if (route.startsWith('./index')) {
       return
       return
     }
     }
-    const moduleName = route.replace(/.\/(.*)\.js$/, '$1')
-    const storeModule = storeContext(route).default
-
+    const moduleName = route.replace(/(.*\/)*([^.]+).*/ig, '$2')
+    const storeModule = storeContext[route].default
     stores[moduleName] = (storeModule.default || storeModule)
     stores[moduleName] = (storeModule.default || storeModule)
   })
   })
+
   return stores
   return stores
 }
 }

+ 88 - 0
apps/work-bench/vite.config.js

@@ -0,0 +1,88 @@
+import { resolve } from 'node:path'
+import viteCompression from 'vite-plugin-compression'
+import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite'
+import legacy from '@vitejs/plugin-legacy'
+import vue2 from '@vitejs/plugin-vue2'
+import { ViteEjsPlugin } from 'vite-plugin-ejs'
+import { viteExternalsPlugin } from 'vite-plugin-externals'
+import { visualizer } from 'rollup-plugin-visualizer'
+import eslintPlugin from '@nabla/vite-plugin-eslint'
+// https://github.com/iamxiyang/vite-plugin-html-redirect
+import ViteHtmlRedirect from 'vite-plugin-html-redirect'
+// import { sentryVitePlugin } from '@sentry/vite-plugin'
+import { useServerProxy } from '../../configs/proxy/dev-proxy'
+import { legacyQiankun } from 'vite-plugin-legacy-qiankun'
+
+function getExternals(isDev) {
+  if (isDev) {
+    return {}
+  }
+
+  return {
+    'vue': 'Vue',
+    'vue-router': 'VueRouter',
+    'vuex': 'Vuex',
+    'axios': 'axios',
+    'echarts': 'echarts',
+    'lodash': '_',
+    'dayjs': 'dayjs',
+    'js-cookie': 'Cookies',
+    'jquery': '$',
+    'lottie-web': 'lottie'
+  }
+}
+
+export default defineConfig(({ mode, command }) => {
+  const env = loadEnv(mode, process.cwd())
+  return {
+    base: env.VITE_APP_BASE_PUBLIC,
+    build: {
+      sourcemap: true,
+      outDir: '../../dist/page_workDesktop',
+      emptyOutDir: true
+    },
+    plugins: [
+      splitVendorChunkPlugin(),
+      ViteHtmlRedirect(),
+      vue2(),
+      ViteEjsPlugin({
+        assets: {
+          version: Date.now()
+        }
+      }),
+      eslintPlugin(),
+      viteExternalsPlugin(getExternals(command === 'serve')),
+      legacy({
+        targets: ['ie >= 11'],
+        additionalLegacyPolyfills: ['regenerator-runtime/runtime']
+      }),
+      viteCompression({
+        threshold: 1024
+      }),
+      visualizer(),
+      legacyQiankun({
+        name: 'work-bench',
+        devSandbox: true
+      })
+    ],
+    resolve: {
+      alias: [
+        {
+          find: /^~/,
+          replacement: ''
+        },
+        {
+          find: '@',
+          replacement: resolve(__dirname, 'src')
+        }
+      ],
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    },
+    css: {},
+    server: {
+      host: '0.0.0.0',
+      port: 8082,
+      proxy: useServerProxy('web2')
+    }
+  }
+})

+ 0 - 26
apps/work-bench/vue.config.js

@@ -1,26 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-const proxy = require('./config/dev-proxy')
-
-module.exports = defineConfig({
-  transpileDependencies: true,
-  outputDir: '../../dist/page_workDesktop',
-  publicPath: process.env.VUE_APP_BASE_PUBLIC,
-  productionSourceMap: false,
-  devServer: {
-    historyApiFallback: true,
-    allowedHosts: 'all',
-    headers: {
-      'Access-Control-Allow-Origin': '*'
-    },
-    proxy: proxy
-  },
-  chainWebpack: config => {
-    config.plugin('html').tap(args => {
-      // html中添加资源版本后缀
-      args[0].assets = {
-        version: Date.now()
-      }
-      return args
-    })
-  }
-})

+ 14 - 9
packages/work-bench-frame/package.json

@@ -8,9 +8,11 @@
     "packages"
     "packages"
   ],
   ],
   "scripts": {
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "pnpm run update && pnpm run build:vite",
+    "build:vite": "vite build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write \"./**/*.{,vue,ts,js,json,md}\""
   },
   },
   "dependencies": {
   "dependencies": {
     "@jianyu/easy-inject-iframe": "^0.1.0",
     "@jianyu/easy-inject-iframe": "^0.1.0",
@@ -28,11 +30,6 @@
     "@babel/core": "^7.12.16",
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@jianyu/eslint-config-style": "^0.1.6",
     "@jianyu/eslint-config-style": "^0.1.6",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-component": "^1.1.1",
     "eslint": "^7.32.0",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-import": "^2.25.3",
@@ -42,7 +39,15 @@
     "mockjs": "^1.1.0",
     "mockjs": "^1.1.0",
     "sass": "^1.32.7",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "sass-loader": "^12.0.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "@vitejs/plugin-legacy": "^4.0.4",
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "vite": "^4.5.3",
+    "vite-plugin-ejs": "1.6.4",
+    "vite-plugin-externals": "^0.6.2",
+    "vite-plugin-legacy-qiankun": "^0.0.12"
   },
   },
   "license": "ISC",
   "license": "ISC",
   "homepage": "https://jygit.jydev.jianyu360.cn/EFE/work-bench-frame",
   "homepage": "https://jygit.jydev.jianyu360.cn/EFE/work-bench-frame",

+ 3 - 3
packages/work-bench-frame/packages/api/interceptors.js

@@ -1,11 +1,11 @@
 import service from './service'
 import service from './service'
 import { Notification } from 'element-ui'
 import { Notification } from 'element-ui'
 
 
-const debug = process.env.NODE_ENV !== 'production'
-const AppID = process.env.VUE_APP_ID
+const debug = import.meta.env.NODE_ENV !== 'production'
+const AppID = import.meta.env.VUE_APP_ID
 
 
 if (debug) {
 if (debug) {
-  console.log('[debug]当前环境:', process.env)
+  console.log('[debug]当前环境:', import.meta.env)
 }
 }
 
 
 service.interceptors.request.use(config => {
 service.interceptors.request.use(config => {

+ 1 - 1
packages/work-bench-frame/packages/api/service.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
 import axios from 'axios'
 
 
 export default axios.create({
 export default axios.create({
-  baseURL: process.env.VUE_APP_BASE_API
+  baseURL: import.meta.env.VUE_APP_BASE_API
 })
 })

+ 2 - 2
packages/work-bench-frame/packages/components/Navbar/index.vue

@@ -107,8 +107,8 @@ export default {
   },
   },
   data () {
   data () {
     return {
     return {
-      home: process.env.VUE_APP_BASE_SITE,
-      logo: process.env.VUE_APP_SIMPLE_LOGO,
+      home: import.meta.env.VUE_APP_BASE_SITE,
+      logo: import.meta.env.VUE_APP_SIMPLE_LOGO,
       navs: [
       navs: [
         // {
         // {
         //   label: '前往官网',
         //   label: '前往官网',

+ 1 - 1
packages/work-bench-frame/packages/router/utils.js

@@ -4,7 +4,7 @@
  * @param prefix
  * @param prefix
  * @returns {string|*}
  * @returns {string|*}
  */
  */
-const URL_ORIGIN = process.env.VUE_APP_BASE_SITE || location.origin
+const URL_ORIGIN = import.meta.env.VUE_APP_BASE_SITE || location.origin
 
 
 export function completeURLPrefix (link, prefix = URL_ORIGIN) {
 export function completeURLPrefix (link, prefix = URL_ORIGIN) {
   const hasPrefix = /^http(s)?:\/\//.test(link)
   const hasPrefix = /^http(s)?:\/\//.test(link)

+ 3 - 3
packages/work-bench-frame/packages/store/modules/navbar.js

@@ -5,15 +5,15 @@ export default {
   state: () => ({
   state: () => ({
     types: {
     types: {
       1: {
       1: {
-        icon: process.env.VUE_APP_BASE_SITE + '/images/pc/huodong@2x.png',
+        icon: import.meta.env.VUE_APP_BASE_SITE + '/images/pc/huodong@2x.png',
         label: '活动优惠'
         label: '活动优惠'
       },
       },
       2: {
       2: {
-        icon: process.env.VUE_APP_BASE_SITE + '/images/pc/fuwu@2x.png',
+        icon: import.meta.env.VUE_APP_BASE_SITE + '/images/pc/fuwu@2x.png',
         label: '服务通知'
         label: '服务通知'
       },
       },
       7: {
       7: {
-        icon: process.env.VUE_APP_BASE_SITE + '/images/pc/xitong@2x.png',
+        icon: import.meta.env.VUE_APP_BASE_SITE + '/images/pc/xitong@2x.png',
         label: '系统通知'
         label: '系统通知'
       }
       }
     },
     },

+ 42 - 0
packages/work-bench-frame/vite.config.js

@@ -0,0 +1,42 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+import legacy from '@vitejs/plugin-legacy'
+import vue2 from '@vitejs/plugin-vue2'
+
+export default defineConfig({
+  plugins: [
+    vue2(),
+    legacy({
+      targets: ['ie >= 11'],
+      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
+    })
+  ],
+  resolve: {
+    alias: [
+      // {
+      //   find: /^~/,
+      //   replacement: "",
+      // },
+      {
+        find: '~@',
+        replacement: resolve(__dirname, 'packages')
+      },
+      {
+        find: '@',
+        replacement: resolve(__dirname, 'packages')
+      }
+    ],
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+  },
+  transpileDependencies: true,
+  outputDir: 'home',
+  publicPath: import.meta.env.VUE_APP_BASE_PUBLIC,
+  devServer: {
+    historyApiFallback: true,
+    allowedHosts: 'all',
+    headers: {
+      'Access-Control-Allow-Origin': '*'
+    }
+  }
+})

+ 0 - 23
packages/work-bench-frame/vue.config.js

@@ -1,23 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-const path = require('path')
-
-function resolve (dir) {
-  return path.join(__dirname, dir)
-}
-
-module.exports = defineConfig({
-  transpileDependencies: true,
-  outputDir: 'home',
-  publicPath: process.env.VUE_APP_BASE_PUBLIC,
-  devServer: {
-    historyApiFallback: true,
-    allowedHosts: 'all',
-    headers: {
-      'Access-Control-Allow-Origin': '*'
-    }
-  },
-  chainWebpack: config => {
-    config.resolve.alias
-      .set('@packages', resolve('packages'))
-  }
-})

文件差异内容过多而无法显示
+ 106 - 584
pnpm-lock.yaml


部分文件因为文件数量过多而无法显示