Vite 2.x 下如何使用 antd ?

[yunsii]

答：基于 vite-plugin-imp，支持定制主题。

import vitePluginImp from 'vite-plugin-imp';

export default defineConfig({
  plugins: [
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        // modifyVars: { 'primary-color': '#13c2c2' },
        javascriptEnabled: true,
      },
    },
  },
});

更多配置可以参考我项目里的配置 vite-react/vite.config.ts。至于讨论 #29325 中提到组件无法使用的情况暂时没遇到，遇到就 PR _(:3J∠)_

[yunsii]

果然发现了一个问题，使用 List 组件 loading 效果不可见，需要单独引入 spin 的样式。

问题已解决，配置已更新。

[yunsii]

看了 vitejs/vite#728 (comment) 才反应过来，有点搞笑了。没注意直接用的 lib，然后报错 require is not defined，就想着直接引用 less，看到突然恍然大悟，用 es 就完事了，样式依赖的问题就不用自己搞了。

[yunsii]

今天又发现了一个问题，当在 Vite 下混用 antd/es 和 antd/lib 时，编译会有问题。原因是 @babel/runtime 在 antd/lib 和其内部使用方式不同：

在 antd/lib/locale-provider/index.js 中：

var _typeof = require("@babel/runtime/helpers/typeof");

在 @babel/runtime/helpers/interopRequireWildcard.js 中：

var _typeof = require("@babel/runtime/helpers/typeof")["default"];

因此，以我当前的认知来看，无论 vite 中 commonjsOption 如何配置编译 require，都不能调和这两个矛盾。将 antd/lib 引用全部换成 antd/es 编译问题得以解决。最后，由此可得，在 vite 中开发时，能用 esm 就用 esm，别乱混用 cjs 的东西 😂

[yoyo837]

分享下配置呗。

[yunsii]

分享下配置呗。

没别的配置了啊 😂 这里提到的是我碰到的 cjs 和 esm 混用的问题，都用 esm 就好了。

[yunsii]

分享下配置呗。

是我表达的问题吗？现在更新了一下，一楼就是相关配置 _(:з」∠)_

[Emily-0616]

我根据这份配置出现了另外一个问题，浏览器log 输出的行数与实际开发报错的行数不一致，我修改了sourcemap 同样没效果

[yunsii]

我也碰到了，不过是后来发现的，不确定是什么插件导致的问题，后来搁置了，刚去 https://github.com/onebay/vite-plugin-imp/issues 看了一下，看起来问题不小。

如果问题不好解决的情况下，可以考虑直接使用 antd/dist/antd.less 而不用按需加载样式。

[hxing]

     

…

------------------ 原始邮件 ------------------ 发件人："云深" ***@***.***" 时　间：2022/07/06 11:45:37 周三 收件人：ant-designant-design ***@***.***" 抄送人：Subscribed ***@***.***" 主　题：Re: [ant-design/ant-design] Vite 2.x 下如何使用 antd ? (Discussion #29660)   我也碰到了，不过是后来发现的，不确定是什么插件导致的问题，后来搁置了，刚去 https://github.com/onebay/vite-plugin-imp/issues 看了一下，看起来问题不小。 如果问题不好解决的情况下，可以考虑直接使用 antd/dist/antd.less 而不用按需加载样式。 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: @ github . com>