vite/rollup打包产物中有node_modules问题

背景

我这边使用第三方的ui库开发了一些业务组件库，想要打个包放到npm。配置如下：

• vue3
• vite4打包
• 组件库naive-ui
• 支持ts 这里提供一份基础的打包配置

 build: {
      minify: true,
      lib: {
        entry: [resolve(__dirname, 'src/index.ts')],
        formats: ['es', 'cjs']
      },
      rollupOptions: {
        external: ['lodash-es', 'naive-ui', 'vue'],
        // 忽略打包vue文件
        input: [resolve(__dirname, 'src/index.ts')],
        output: [
          {
            format: 'es',
            entryFileNames: '[name].js',
            preserveModules: true,
            // 配置打包根目录
            dir: 'es',
            exports: 'named',
            preserveModulesRoot: 'src'
          },
          {
            format: 'cjs',
            entryFileNames: '[name].js',
            preserveModules: true,
            dir: 'lib',
            exports: 'named',
            preserveModulesRoot: 'src'
          }
        ]
      }
    },

问题复现

使用 vite 打包vue3组件库时，发现打包产物中有node_modules，如下图

会发现在打包产物中有node_modules，感觉这和一般的打包产物都不太一样，所有就去排查了一下。

发现使用了create-injection-key.js这个文件，于是全局搜索，发现下面这个地方

所以大胆猜测是引入方式的问题导致，不能直接引入/es下的文件。这样打包时，会直接去node_modules下去找，然后直接copy到打包文件中。

解决办法

1. 切换引用方式

直接从naive-ui下引入，如果第三方库没有export出来，就自己写一个方法，不要直接去/es下去引入。

2. 添加external

直接把对应的目录添加到external中，让这个包作为第三方库，不打包到打包产物中，这样也就解决了问题，但是前提是naive-ui这个库下面/es不能修改，不然组件库的依赖就会找不到

export default {
  build: {
    rollupOptions: {
      external: ['naive-ui/es/_utils']
    }
  }
}

3. 检查Vite插件

确保你使用的任何Vite插件都不会改变默认的打包行为，特别是与依赖管理或打包相关的插件。

总结

导入第三方的库，一定要按照官方文档的方式导入，不能直接从源码层面去做import, 不然会遇到很多奇怪的问题，顺便提一嘴，在改这个问题的时候，还发现moment库也跑到node_modules下了，查了下说是，moment库导入时会全部导入，即使你只使用了moment的部分功能，完整的库也可能被包含在你的打包产物中，所以把moment库改成dayjs就没这个问题了