查找项目中使用process.env.NODE_ENV,替换为import.meta.env.DEV,因为再Vite中不再有node.js相关的 API 将antd添加进项目后,发现babel-plugin-import对应的Vite插件似乎有问题,某些样式在 dev 模式下缺失,打包后正常。排查发现是组件包里面引用了antd,在dev模式下包名被“依赖预构建” 混淆,导致插件无法正确插入antd...
其实并不是Webpack而是因为babel插件babel-plugin-import: // babel.config.js module.exports = { plugins: [ // ... [ 'import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }, ], ], }; 因为antd 默认支持基于ES Module的tree shaking,而babel-plugin-import的功能我们可以简单...
查找项目中使用 process.env.NODE_ENV,替换为 import.meta.env.DEV,因为再 Vite 中不再有 node.js 相关的 API 将antd 添加进项目后,发现 babel-plugin-import 对应的 Vite 插件似乎有问题,某些样式在 dev 模式下缺失,打包后正常。排查发现是组件包里面引用了 antd,在 dev 模式下包名被“依赖预构建” 混淆,...
假设你使用的组件库在迁移到 vite 前使用的babel-plugin-import, 那么你迁移到这个插件应该很容易. 这个库的配置方式, 是参考babel-plugin-import实现的。 如果, 你使用的是自己实现的组件库, 那可以先尝试下, 如果样式导入不成功, 可以通过自定义IStylePathFactory来获取需要导入的样式. ...
importcreateImportPlugin from'vite-plugin-import' plugins: [ ... // 使用以下 插件 使antd-mobile可以按需引入 createImportPlugin({ onlyBuild:false,//是否只需要在生产环境中使用 babelImportPluginOptions: [ { libraryName:'antd-mobile', libraryDirectory:'es', ...
vite-plugin-importis a little faster then@rollup/plugin-babel + babel-plugin-import. Usage vite.config.js: importcreateImportPluginfrom'vite-plugin-import';constconfig={plugins:[createImportPlugin([{libraryName:'antd','style':true,// or 'css'}]),],}// orconstconfig={plugins:[createImportPl...
ps:在官网看半天还以为要引入babel-plugin-import来按需引入,搞半天最后发现可以直接引入。。。 在src建立目录plugin/antd目录,在下面创建index.js文件,代码如下: importVuefrom'vue'import{Button,message}from'ant-design-vue'// 按需引入import'ant-design-vue/dist/antd.css'// or 'ant-design-vue/dist/antd...
copy - 设置要复制到输出目录的文件或文件夹(对应 rollup-plugin-copy) mock - 配置 mock 属性(对应 vite-plugin-mock) extraBabelPlugins - 配置额外的 babel 插件(对应 @rollup/plugin-babel) 通过配置分析,基本上所有的UmiJS配置都可以在Vite中找到替代方案。除了配置还有一些约定 ...
传统的 antdv 的按需加载,都会使用 babel-plugin-import 这个插件进行按需分析然后自动引入,但是 antdv 中有很多嵌套的父子组件: 由于内部设计原因,无法使用这个插件进行按需导入。最主要的是我们已经使用了vite,本身就带有按需导入,我们只需要处理他们的css的按需引入即可。所以使用了2个插件: vite-plugin-components...
vite.ssrLoadModule 方法虽然能够让我们在 Node.js 环境中直接使用 ESM 模块,但是这样需要在生产环境中安装 Vite 依赖,且由于缺少了 bundle 的这个过程,由于 Node.js 环境是无法识别处理样式文件的,一旦使用了 antd/vant 这样的依赖,由于 antd/vant 在使用 babel-plugin-import 导入时会在一个 js 文件中去 ...