refactor: 更改start-dev-server相关逻辑，将require改成使用importx-tsup进行导入 (#214)

dev-packages/cli-service/package.json

@@ -60,7 +60,8 @@
     "typescript": "~5.4.5",
     "webpack": "^5.76.0",
     "webpack-dev-server": "^4.15.1",
-    "webpack-node-externals": "^3.0.0"
+    "webpack-node-externals": "^3.0.0",
+    "importx-tsup": "^0.5.2"
   },
   "devDependencies": {
     "@celljs/component": "3.1.0",

dev-packages/cli-service/src/hooks/start-dev-server.ts

@@ -7,6 +7,7 @@ import { BACKEND_TARGET, FRONTEND_TARGET } from '@celljs/cli-common/lib/constant
 import * as delay from 'delay';
 import { ConfigurationContext } from '../context/context-protocol';
 const clearModule = require('clear-module');
+import { importx } from 'importx-tsup';
 
 let server: any;
 let moduleCaches: string[] = [];
@@ -69,7 +70,7 @@ async function attachBackendServer(ctx: ConfigurationContext, callback: Callback
         while (true) {
             if (fs.existsSync(entryPath)) {
                 mountRuntimeModuleCaches();
-                return require(entryPath);
+                return importx(entryPath, __filename);
             }
             await delay(200);
         }

examples/vitesse-app/eslint.config.js

@@ -0,0 +1,20 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  rules: {
+    /// 必须要关闭的规则，否则依赖注入不可用
+    'perfectionist/sort-imports': 'off',
+    'ts/consistent-type-imports': 'off',
+    'ts/no-empty-object-type': 'off',
+    'ts/no-redeclare': 'off',
+
+    // 可选的规则
+    'antfu/if-newline': 'off',
+  },
+  ignores: [
+    '.cell',
+    'lib',
+    'node_modules',
+    'dist',
+  ],
+})

examples/vitesse-app/package.json

@@ -1,16 +1,28 @@
 {
-  "private": true,
   "name": "@celljs/example-vitesse-app",
+  "type": "module",
+  "version": "3.1.0",
+  "private": true,
+  "license": "MIT",
   "keywords": [
     "cell-component"
   ],
-  "version": "3.1.0",
-  "license": "MIT",
   "files": [
     "lib",
     "src"
   ],
+  "scripts": {
+    "clean": "rimraf lib dist .cell",
+    "build": "cell build",
+    "start": "cell serve",
+    "deploy": "cell deploy -m scf -m test",
+    "deploy:test": "cell deploy -m scf -m test",
+    "deploy:pre": "cell deploy -m scf -m pre",
+    "deploy:prod": "cell deploy -m scf -m prod",
+    "lint": "eslint"
+  },
   "dependencies": {
+    "@antfu/eslint-config": "^3.8.0",
     "@celljs/core": "3.1.0",
     "@celljs/rpc": "3.1.0",
     "@celljs/serve-static": "3.1.0",
@@ -21,6 +33,7 @@
   },
   "devDependencies": {
     "@celljs/cli": "3.1.0",
+    "@celljs/eslint": "^3.1.0",
     "@intlify/unplugin-vue-i18n": "^5.2.0",
     "@shikijs/markdown-it": "^1.22.0",
     "@types/markdown-it-link-attributes": "^3.0.5",
@@ -31,14 +44,5 @@
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-markdown": "^0.26.2",
     "unplugin-vue-router": "^0.10.8"
-  },
-  "scripts": {
-    "clean": "rimraf lib dist .cell",
-    "build": "cell build",
-    "start": "cell serve",
-    "deploy": "cell deploy -m scf -m test",
-    "deploy:test": "cell deploy -m scf -m test",
-    "deploy:pre": "cell deploy -m scf -m pre",
-    "deploy:prod": "cell deploy -m scf -m prod"
   }
 }

examples/vitesse-app/src/browser/main.ts

@@ -1,5 +1,5 @@
-import { createApp } from 'vue';
-import { App } from '@celljs/vue';
+import { createApp } from 'vue'
+import { App } from '@celljs/vue'
 import Root from './App.vue'
 import router from './router'
 

examples/vitesse-app/src/browser/module.ts

@@ -1,4 +1,4 @@
-import './main';
-import { autoBind } from '@celljs/core';
+import './main'
+import { autoBind } from '@celljs/core'
 
-export default autoBind();
+export default autoBind()

examples/vitesse-app/src/browser/pages/hi/[name].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
 </script>
 
-<template></template>
+<template>
+  <div>Hello name</div>
+</template>

examples/vitesse-app/src/browser/pages/index.vue

@@ -5,7 +5,9 @@ const router = useRouter()
 <template>
   <div>
     Index Page
-    <button @click="router.push('/')">跳转到首页</button>
+    <button @click="router.push('/')">
+      跳转到首页
+    </button>
     <HelloWorld />
   </div>
 </template>

examples/vitesse-app/src/browser/router.ts

@@ -2,6 +2,6 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
 export default createRouter({
-    history: createWebHistory(),
-    routes,
+  history: createWebHistory(),
+  routes,
 })

examples/vitesse-app/src/browser/shims.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="unplugin-vue-router/client" />
 
 declare module '*.vue' {
-    import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue'
 
-    const component: DefineComponent<{}, {}, unknown>
-    export default component
+  const component: DefineComponent<{}, {}, unknown>
+  export default component
 }
 
 declare module '*.svg'
@@ -15,7 +15,6 @@ declare module '*.gif'
 declare module '*.bmp'
 declare module '*.tiff'
 
-
 declare module 'vue-router/auto-routes' {
-    export const routes: any
+  export const routes: any
 }

examples/vitesse-app/src/common/welcome-protocol.ts

@@ -1,5 +1,5 @@
-export const WelcomeServer = Symbol('WelcomeServer');
+export const WelcomeServer = Symbol('WelcomeServer')
 
 export interface WelcomeServer {
-    say(): Promise<string>;
+  say: () => Promise<string>
 }

examples/vitesse-app/src/node/module.ts

@@ -1,4 +1,4 @@
-import './welcome-server';
-import { autoBind } from '@celljs/core';
+import './welcome-server'
+import { autoBind } from '@celljs/core'
 
-export default autoBind();
+export default autoBind()

examples/vitesse-app/src/node/welcome-server.ts

@@ -1,9 +1,9 @@
-import { WelcomeServer } from '../common/welcome-protocol';
-import { Rpc } from '@celljs/rpc';
+import { Rpc } from '@celljs/rpc'
+import { WelcomeServer } from '../common/welcome-protocol'
 
 @Rpc(WelcomeServer)
 export class WelcomeServerImpl implements WelcomeServer {
-    say(): Promise<string> {
-        return Promise.resolve('Welcome to Cell');
-    }
+  async say(): Promise<string> {
+    return 'Welcome to Cell'
+  }
 }

examples/vitesse-app/src/webpack-hook.ts

@@ -1,3 +1,5 @@
+/* eslint-disable ts/ban-ts-comment */
+
 import { ConfigurationContext, WebpackContext } from '@celljs/cli-service'
 import AutoImport from 'unplugin-auto-import/webpack'
 import VueRouter from 'unplugin-vue-router/webpack'
@@ -12,67 +14,67 @@ import { VueRouterAutoImports } from 'unplugin-vue-router'
 import UnoCSS from 'unocss/webpack'
 
 export default async (ctx: WebpackContext) => {
-    const frontendConfiguration = ConfigurationContext.getFrontendConfiguration(ctx.configurations)
+  const frontendConfiguration = ConfigurationContext.getFrontendConfiguration(ctx.configurations)
 
-    // 让vue去处理md文件
-    const vueLoader = frontendConfiguration?.module.rules.get('vue')
-    vueLoader?.test([/\.vue$/, /\.md$/])
-    // 删除掉原来的vue配置
-    frontendConfiguration?.module.rules.delete('vue')
-    frontendConfiguration?.plugin('unplugin-vue-markdown').use(
-        Markdown({
-            wrapperClasses: 'prose prose-sm m-auto text-left',
-            headEnabled: true,
-            async markdownItSetup(md) {
-              md.use(LinkAttributes, {
-                matcher: (link: string) => /^https?:\/\//.test(link),
-                attrs: {
-                  target: '_blank',
-                  rel: 'noopener',
-                },
-              })
-              md.use(await Shiki({
-                defaultColor: false,
-                themes: {
-                  light: 'vitesse-light',
-                  dark: 'vitesse-dark',
-                },
-              }))
-            },
-        } as MarkdownOptions)
-    )
-    // 重新设置vue配置
-    frontendConfiguration?.module.rules.set('vue', vueLoader!)
-
-    frontendConfiguration?.plugin('unplugin-auto-import').use(
-        AutoImport({
-            imports: [
-                'vue',
-                VueRouterAutoImports
-            ],
-            dts: 'src/browser/auto-imports.d.ts'
+  // 让vue去处理md文件
+  const vueLoader = frontendConfiguration?.module.rules.get('vue')
+  vueLoader?.test([/\.vue$/, /\.md$/])
+  // 删除掉原来的vue配置
+  frontendConfiguration?.module.rules.delete('vue')
+  frontendConfiguration?.plugin('unplugin-vue-markdown').use(
+    Markdown({
+      wrapperClasses: 'prose prose-sm m-auto text-left',
+      headEnabled: true,
+      async markdownItSetup(md) {
+        md.use(LinkAttributes, {
+          matcher: (link: string) => /^https?:\/\//.test(link),
+          attrs: {
+            target: '_blank',
+            rel: 'noopener',
+          },
         })
-    )
+        md.use(await Shiki({
+          defaultColor: false,
+          themes: {
+            light: 'vitesse-light',
+            dark: 'vitesse-dark',
+          },
+        }))
+      },
+    } as MarkdownOptions),
+  )
+  // 重新设置vue配置
+  frontendConfiguration?.module.rules.set('vue', vueLoader!)
 
-    frontendConfiguration?.plugin('unplugin-vue-router').use(
-        VueRouter({
-            dts: 'src/browser/vue-router.d.ts',
-            routesFolder: 'src/browser/pages',
-            extensions: ['.vue', '.md'],
-        })
-    )
+  frontendConfiguration?.plugin('unplugin-auto-import').use(
+    AutoImport({
+      imports: [
+        'vue',
+        VueRouterAutoImports,
+      ],
+      dts: 'src/browser/auto-imports.d.ts',
+    }),
+  )
 
-    frontendConfiguration?.plugin('unocss').use(
-        UnoCSS()
-    )
-
-    frontendConfiguration?.plugin('unplugin-vue-components').use(
-        Components({
-            dts: 'src/browser/components.d.ts',
-            extensions: ['vue', 'md'],
-            dirs: [
-                'src/browser/components',
-            ]
-        })
-    )
+  frontendConfiguration?.plugin('unplugin-vue-router').use(
+    VueRouter({
+      dts: 'src/browser/vue-router.d.ts',
+      routesFolder: 'src/browser/pages',
+      extensions: ['.vue', '.md'],
+    }),
+  )
+
+  frontendConfiguration?.plugin('unocss').use(
+    UnoCSS(),
+  )
+
+  frontendConfiguration?.plugin('unplugin-vue-components').use(
+    Components({
+      dts: 'src/browser/components.d.ts',
+      extensions: ['vue', 'md'],
+      dirs: [
+        'src/browser/components',
+      ],
+    }),
+  )
 }

examples/vitesse-app/tsconfig.json

@@ -33,6 +33,9 @@
     {
       "path": "../../dev-packages/cli"
     },
+    {
+      "path": "../../dev-packages/eslint"
+    },
     {
       "path": "../../packages/core"
     },