`preserveModulesRoot` is invalid in windows

[ckvv]

`preserveModulesRoot` is invalid in windows

[ckvv]

这个和在我的机器上（mac）的打包结果不同，看结果似乎是因为在Windows上的preserveModulesRoot 参数没有生效，周末我在window机器上面测试一下，

[agileago]

插件生成出来的类型文件始终带着src目录，这是问题所在

[ckvv]

@binvb
你可以参考这个
https://github.com/ckpack/v-ui/blob/c21a8819694f129e7dd4adb40ea581c687940d39/scripts/vite.es.js#L14-L23

[qmhc]

默认的输出路径和 vite 打包输出路径一样，你可以通过插件选项 outputDir 修改输入路径。

[ckvv]

@qmhc 似乎是应为插件不支持应为这个参数导致的preserveModulesRoot,参考https://rollupjs.org/guide/en/#outputpreservemodulesroot

[qmhc]

使用的是插件的初始化选项，你可以查阅文档的选项部分，或者查阅 example 文件夹下的示例

[ckvv]

看代码中并没有对preserveModulesRoot 做特殊处理

vite-plugin-dts/src/plugin.ts

Lines 319 to 340 in 173dfe7

	await runParallel(os.cpus().length, outputFiles, async outputFile => {
	let filePath = outputFile.path
	let content = outputFile.content
	const isMapFile = filePath.endsWith('.map')
	if (
	!includedFileSet.has(isMapFile ? filePath.slice(0, -4) : filePath) ||
	(clearPureImport && content === noneExport)
	) {
	return
	}
	if (!isMapFile && content && content !== noneExport) {
	content = clearPureImport ? removePureImport(content) : content
	content = transformAliasImport(filePath, content, aliases)
	content = staticImport ? transformDynamicImport(content) : content
	}
	filePath = resolve(
	outputDir,
	relative(root, cleanVueFileName ? filePath.replace('.vue.d.ts', '.d.ts') : filePath)

我用下面这种方式修改了路径

  plugins: [dtsPlugin({
    cleanVueFileName: true,
    beforeWriteFile(filePath, content){
      return {
        filePath: filePath.replace(`${rootPath}/es/src`, `${rootPath}/es`),
        content,
      };
    }
  }), vue()]

[qmhc]

呃，我主要是没有理解你的需求是什么。

你是希望打包出的目录接口如你开始发的这张图一样，
（这里有好多同名的 index.d.ts 被相互覆盖了）

还是希望是下面这种结构？
（这是注释掉 beforeWriteFile 后打包出来的结构）

或者是其他的结构？

你能否详细的描述一下你的需求，是希望打包出怎么样的目录结构，与现在的差异在什么地方？

[ckvv]

我是想打包的定义文件和生成的js文件平级

比如说这里有两个原始文件

src/module.ts
src/another/module.ts

现在打包后是，其中的src目录不是我想要的

es/module.js
es/src/module.d.ts
es/another/module.js
es/src/another/module.d.ts

我想要的结果是

es/module.js
es/module.d.ts
es/another/module.js
es/another/module.d.ts

我现在是通过beforeWriteFile把目录/es/src替换成了/es解决的

[ckvv]

目录不一致的原因是因为没有处理vite配置文件

//vite.config.js
{
...
build: {
  rollupOptions: {
      output: {
        entryFileNames: '[name].js',
        preserveModules: true,
        preserveModulesRoot,
      },
  }
}
...
}

其中preserveModulesRoot会修改打包的路径

[qmhc]

我注释掉你项目中 scripts/vite.es.js 中的 beforeWriteFile，执行 pnpm run build:es 打包出来的结果是你说的想要的结果：

我使用的是 windows 系统下 vscode，你的 beforeWriteFile 在 windows 系统下并没有生效（由于路径中 '/' 和 '\' 的区别），注释掉之后打包出来的结果是一样的。

反而我通过 path.resolve() 处理路径后，使你的 beforeWriteFile 生效，打包后出来的结果是你说的不想要的结果：

你是在怎么的环境下发生这样的问题，我这边确实是无法复现。

[ckvv]

这个也不正确,es目录下统一多了一个下src目录

这个是我现在生成的的正确的目录
https://cdn.jsdelivr.net/npm/@ckpack/v-ui/es/

[qmhc]

不使用插件直接打包出来的结构如下：

在 es 下也是含有 src 目录的，是否有一些外部的参数或环境影响，或者有一些额外的步骤？

[ckvv]

这个似乎是vite的问题，我在那边提了个issue
vitejs/vite#6509

[binvb]

@qmhc 可以指定生成路径吗? 我也遇到这个问题，我是调用 vite 的build方法进行打包的，而dts总是自动生成跟开发环境一样的目录,e.g.

// 生产环境
-- packages
   --- AComponent
   --- BComponent
-- src
   -- app.vue
// 打包目录
-- dist
   -- AComponent
   -- BCompoenent
// dst output
-- dist
   --packages
  --src
...

[qmhc]

相关问题仍在等待 vite 分流，插件层面存在暂时解决方案，我先修改标题并关闭这个 issue 以免产生误导。

@agileago 如果你的问题仍未解决，你可以打开一个新的 issue，并提供具体的配置和环境信息，如果可以提供一个最小的复现项目，将更有助于更快地定位问题。