Rollup-plugin-typescript2: 解析声明文件中的路径别名 (d.ts)

根据打字稿人的说法，您是在向后使用它：

我们对此的一般看法是您应该编写在运行时工作的导入路径，并设置您的 TS 标志以满足编译器的模块解析步骤，而不是编写开箱即用的 TS 导入，然后尝试有一些其他步骤“修复”运行时工作的路径。

https://github.com/microsoft/TypeScript/issues/15479

目前，这个插件一旦被打字稿发出，就不会发布过程，甚至不会解析类型声明。

可能会做一些比搜索/替换稍微好一点的事情，但一般来说，为了解决这个问题，我们基本上需要重新实现类型声明的汇总（除非他们已经添加了语言服务 API 来生成捆绑声明，而我没有在看）

谢谢回复。 是否有一个在监视和构建模式下运行的“发布后”钩子，可用于附加粗略的搜索/替换后处理步骤？

d.ts 文件直接发送到汇总管道中（当使用useTsconfigDeclarationDir: false选项时），因此您可以制作一个汇总插件来转换它们。

但是，它们会在写入包时发出，因此您可能必须使用generateBundle钩子而不是transform 。

如果那不起作用。 我可以为 rpt2 本身添加一个预写钩子。

遇到同样的问题，在这里找到了一个walkaround
当前使用ttsc和typescript-transform-paths在汇总发出 ts 文件后生成声明文件，有点多余但有效......

是的，我也使用 ttsc 实现了这一点。 我无法让转换器直接使用 rollup-plugin-typescript2 transformers选项，所以我选择使用ttsc

我的汇总配置如下所示：

import typescript from 'rollup-plugin-typescript2'

export default {
  input: `src/index.ts`,
  preserveModules: true,
  output: {
    format: 'esm',
    dir: './dist'
  },
  external: [],
  watch: {
    include: 'src/**',
  },
  plugins: [
    typescript({ 
      typescript: require('ttypescript'),
      tsconfigDefaults: {
        compilerOptions: {
          plugins: [
            { "transform": "typescript-transform-paths" },
            { "transform": "typescript-transform-paths", "afterDeclarations": true }
          ]
        }
      }
    }),
  ],
}

谢谢@alshdavid ！ 你救了我的命！ 昨天我遇到了同样的问题，通过使用typescript-transform-paths我解决了它！ 谢谢💪

// webpack.config.js
module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              compiler: 'ttypescript',
            },
          },
          {
            loader: require.resolve('react-docgen-typescript-loader'),
          },
        ],
        exclude: /(node_modules)/,
      },
    ],
  },

// tsconfig.json
compilerOptions: {
  "plugins": [
     { "transform": "typescript-transform-paths" },
     { "transform": "typescript-transform-paths", "afterDeclarations": true }
   ]
}

这个解决方案过去对我有用，但我现在发现很多情况，我收到这样的错误：

UnhandledPromiseRejectionWarning: TypeError: 无法读取未定义的属性“文本”

如果我不再使用别名（和这些插件），那么它就可以正常工作。 还有其他人有这个问题吗？

这个解决方案过去对我有用，但我现在发现很多情况，我收到这样的错误：

UnhandledPromiseRejectionWarning: TypeError: 无法读取未定义的属性“文本”

如果我不再使用别名（和这些插件），那么它就可以正常工作。 还有其他人有这个问题吗？

我有同样的错误

这个解决方案过去对我有用，但我现在发现很多情况，我收到这样的错误：

UnhandledPromiseRejectionWarning: TypeError: 无法读取未定义的属性“文本”

如果我不再使用别名（和这些插件），那么它就可以正常工作。 还有其他人有这个问题吗？

嗨，我遇到了同样的问题，但在不同的上下文中：我正在使用汇总来捆绑用 Vue 和 Typescript 编写的组件库。 这是rollup.config.js文件：

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import css from "rollup-plugin-css-only";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "./src/index.ts",
    preserveModules: true,
    output: {
      format: "esm",
      dist: "./dist"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "./src/") }
      }),
      css({ output: "dist/bundle.css" }),
      scss(),
      typescript({
        typescript: require("ttypescript"),
        tsconfigDefaults: {
          compilerOptions: {
            plugins: [
              { transform: "typescript-transform-paths" },
              {
                transform: "typescript-transform-paths",
                afterDeclarations: true
              }
            ]
          }
        }
      }),
      vue({ css: false })
    ]
  }
];

我已经使用了ttsc --emitDeclarationOnly后命令rollup --config之一，为了解决别名，但.vue.d.ts通过汇总生成的文件不被处理（当然）。

ttypescript和typescript-transofrm-paths相同问题，它不起作用：失望。 运行构建时：

[!] (plugin rpt2) TypeError: Cannot read property 'text' of undefined

但是使用@zerollup/ts-transform-paths和ttypescript就可以了 🎉

这里有一个很棒的设置： https: //www.npmjs.com/package/@zerollup/ts -transform-paths#setup-for-rollup-plugin-typescript2

_rollup.config.js_

import ttypescript from 'ttypescript'
import tsPlugin from 'rollup-plugin-typescript2'

export default {
    input: 'src/lib.ts',
    output: [{ file : 'dist/lib.js', name : 'mylib', format : 'iife', sourcemap : true }],
    plugins: [
        tsPlugin({
            typescript: ttypescript
        })
    ]
}

_tsconfig.json_

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "my-lib/*": ["src/*"]
        },
        "plugins": [
            {
                "transform": "@zerollup/ts-transform-paths",
                "exclude": ["*"]
            }
        ]
    }
}

伟大的！ 我用不同的方式解决了，但它与此插件无关。 我删除了 typescript-transform-path 和 ttypescript 并保留了当前插件（typescript()）。 我在 rollup 后使用了 tsc-alias 来解决问题。 它甚至会替换 vue 文件，因为它会在生成后处理 .d.ts 文件。

我在汇总后使用tsc-alias来解决问题。 它甚至会替换 vue 文件，因为它会在生成后处理 .d.ts 文件。

@mantlebee你介意发布一个你的tsconfig.json以及你的汇总配置的例子吗？

但是使用@zerollup/ts-transform-paths和ttypescript就可以了 🎉

@luanorlandi ts-transform-path在运行时不起作用？ 对于库代码来说可能不是一个好主意。

我在汇总后使用tsc-alias来解决问题。 它甚至会替换 vue 文件，因为它会在生成后处理 .d.ts 文件。

@mantlebee你介意发布一个你的tsconfig.json以及你的汇总配置的例子吗？

重要的属性是declaration 、 declarationDir和outDir

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "dist/src",
    "baseUrl": ".",
    "outDir": "dist/src",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

简单的rollup.config.js文件

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "src/index.ts",
    output: {
      format: "esm",
      file: "dist/elegere-ui.js"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "src/") }
      }),
      scss(),
      typescript({
        useTsconfigDeclarationDir: true
      }),
      vue()
      //{ css: false }
    ]
  }
];

然后我把所有东西都放到prepublishOnly命令中（只是因为它对我有用）

"prepublishOnly": "npm run rollup && tsc-alias && npm run docs"

TSC-ALIAS 将在dist/src文件夹内执行替换； 我选择把所有东西都放在里面，因为 ts-alias 会替换认为在 src 文件夹中的别名。

不是最佳结论，但它有效。 我会尽快从@luanorlandi签出解决方案。

当然，必须配置所有其他库以避免dist/src文件夹，例如jest

但是使用@zerollup/ts-transform-paths和ttypescript就可以了 🎉

@luanorlandi ts-transform-path在运行时不起作用？ 对于库代码来说可能不是一个好主意。

我不这么认为，转换器仅用于构建步骤，正如库描述的那样：

_...tsconfig baseUrl + 路径别名重写包和声明文件。 所有这些都将在转译的 js 和 d.ts 文件中重写为相对的。_

https://www.npmjs.com/package/@zerollup/ts -transform-paths