我可以自定义应用的入口么？

[Zephylaci]

我看到有一个.vit/vit.tsx 文件作为入口，但是修改这里每次重新启动都会重置，有办法自定义么？

[yunsii]

类似 umi 一样接管了应用入口，基本不用管入口的，其他操作应该都可以通过自定义 globalImport 来解决，如果不能的话还请具体说明一下你的使用场景。

[Zephylaci]

类似 umi 一样接管了应用入口，基本不用管入口的，其他操作应该都可以通过自定义 globalImport 来解决，如果不能的话还请具体说明一下你的使用场景。

有两个场景 一个是 ant design 使用了一些dom api引入对应的组件会有错误提示（因为严格模式），不过这个是小问题不影响使用
另一个是我想使用keep-alive 推荐在路由第一层挂组件 react-activation

我试着在 RootLayout 或者 BasicLayout 挂这个组件，没有生效 作为临时方案，我可以改 node_modules/@vitjs/vit/dist/generateFiles/vit.tpl 就是比较麻烦

其它虽然我没在用，但需要在入口折腾的，比如，ant-design 的全局配置（弹窗DOM挂载点之类的），国际化，服务端获取菜单，无业务侵入的埋点统计，微服务化等等等..我感觉应该是个挺常见的场景

[yunsii]

有道理，应该搞一个类似 Next.js 的 _app.tsx 的自动引入，有兴趣 PR 吗？:joy: 不急的话这个假期结束前我应该能搞定。

[Zephylaci]

不急，我就不班门弄斧了😂

[yunsii]

应该搞定了，支持 _app.tsx 的形式，Demo 参考：https://github.com/vitjs/vit/blob/master/example/src/_app.tsx

[Zephylaci]

升上去后..项目起不来了..项目是你用这个框架搭的带ant-desgin的脚手架项目，一开始报autoImport重复，去掉相关配置后..报循环引用

还一个问题是,现在产物里AppProps没有导出，我看了一眼在 /vit里..似乎不是很好导出来

import { AppProps } from '@vitjs/runtime';
// Module '"@vitjs/runtime"' has no exported member 'AppProps'

另外提个小建议,模板可以改成这样，保持最大限度的可自定义性

const DefaultApp: React.FC = () => {
  return (
    <React.StrictMode>
      <Router history={history}>
        {renderRoutes({ routes: getRoutes() })}
      </Router>
    </React.StrictMode>)
}

ReactDOM.render(
  <CustomApp
    Component={DefaultApp}
    getRoutes={getRoutes}
  />,
  document.getElementById('root'),
);

附上配置文件

// import * as path from 'path';
import react from '@vitejs/plugin-react'
import vitApp from '@vitjs/vit'
import { getThemeVariables } from 'antd/dist/theme'
import { visualizer } from 'rollup-plugin-visualizer'
import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'
import windiCSS from 'vite-plugin-windicss'
import tsconfigPaths from 'vite-tsconfig-paths'

import routes from './config/routes'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  plugins: [
    react(),
    tsconfigPaths(),
    windiCSS(),
    vitApp({
      routes,
      dynamicImport: {
        loading: './components/PageLoading',
      },
      exportStatic: {},
    }),
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
    visualizer(),
  ],
  resolve: {
    alias: [
      // { find: '@', replacement: path.resolve(__dirname, 'src') },
      // fix less import by: @import ~
      // https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
      { find: /^~/, replacement: '' },
    ],
  },
  css: {
    modules: {
      localsConvention: 'camelCaseOnly',
    },
    preprocessorOptions: {
      less: {
        // modifyVars: { 'primary-color': '#13c2c2' },
        modifyVars: getThemeVariables({
          // dark: true, // 开启暗黑模式
          // compact: true, // 开启紧凑模式
        }),
        javascriptEnabled: true,
      },
    },
  },
  server: {

  },
})

在配置好alias前，终端会报错提示找不到ant-design的样式文件，试了很多组合，就是不行.jpg

[yunsii]

在项目内的 example 测试了一下没问题就发布了，今天我在 vite-react 再试试看呢，会尽快解决。

[yunsii]

保持最大限度的可自定义性

这个我没看懂呢，路由渲染拆开是要干嘛？:joy:

[yunsii]

https://github.com/yunsii/vite-react/commit/74dba70d6761f041f97e5194c1484288be9dcb09 看看这个，我在 feat/vitjs 测试没问题诶，这样的话，建议你弄一个简单的复现仓库我再看看。

[Zephylaci]

保持最大限度的可自定义性

这个我没看懂呢，路由渲染拆开是要干嘛？😂

主要针对自定义路由的情况.. 我又想要框架的路由，又想自定义.. 组件传过来不太好改..

<Router history={history}>
      <AliveScope>
        {renderRoutes({ routes: getRoutes() })}
      </AliveScope>
    </Router>,

[yunsii]

这场景太奇怪了，AliveScope 不是应该在 Router 之外吗？接管路由了你还要自定义，这是什么骚操作啊？_(:з」∠)_

[Zephylaci]

yunsii/vite-react@74dba70 看看这个，我在 feat/vitjs 测试没问题诶，这样的话，建议你弄一个简单的复现仓库我再看看。

1. 试了下.."@vitjs/vit" 这个我之前装的 0.8.0 的（建议看下npm上能不能把这个版本下了.指定0.8.0 ..自动安装0.8.1的..）
2. 关于路由尝试并思考了下，的确，要么完全使用框架的，要么完全自定义，拆开来自定义的成本和完全自定义差不多（都需要了解内部实现），意义似乎不是很大
3. 然后，虽然影响不大..要不要考虑把 配置成可选的？

[yunsii]

0.8.1 我只是移除了两个 console 语句，React.StrictMode 的话只会影响开发环境，难度还有不开的情况？我不太理解 😂

[Zephylaci]

0.8.1 我只是移除了两个 console 语句，React.StrictMode 的话只会影响开发环境，难度还有不开的情况？我不太理解 😂

影响倒是不大，就是不想看到报错...主要是三方库的报错没法处理😂 我刚一路把依赖回退到0.7.0，它也不报错了，代码配置啥都没改过..只有依赖重新装 也许是我上次把lock文件也删了重建的原因吧，不纠结了,问题解决，完结撒花🎉

[yunsii]

第三方的问题也只是开发环境会报，我也是有强迫症的，这点我觉得还是有必要的，毕竟得知道哪些库有兼容性问题，别到时候出了什么问题自己都不知道。