Rollup-plugin-typescript2: 선언 파일 (d.ts)에서 경로 별칭 확인

typescript 사람들에 따르면, 당신은 그것을 거꾸로 사용하고 있습니다.

우리의 일반적인 견해는 TS에 대해 즉시 작동하는 가져 오기를 작성하고 시도하는 대신 런타임에 작동하는 가져 오기 경로를 작성하고 컴파일러의 모듈 확인 단계를 충족하도록 TS 플래그를 설정해야한다는 것입니다. 런타임에 작동하는 경로를 "수정"하는 다른 단계가 있습니다.

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

현재이 플러그인은 typescript에 의해 방출되면 유형 선언을 처리하거나 구문 분석하지 않습니다.

검색 / 바꾸기보다 약간 더 나은 작업을 수행 할 수 있지만 일반적으로이 문제를 해결하려면 기본적으로 유형 선언에 대한 롤업을 다시 구현해야합니다 (내가 보지 않는 동안 번들 선언을 생성하기 위해 언어 서비스 API를 이미 추가하지 않은 경우).

답장을 보내 주셔서 감사합니다. 조잡한 검색 / 교체 후 처리 단계를 연결하는 데 사용할 수있는 감시 모드와 빌드 모드 모두에서 실행되는 "포스트 방출"후크가 있습니까?

d.ts 파일은 롤업 파이프 라인으로 직접 방출되므로 ( useTsconfigDeclarationDir: false 옵션이 사용되는 경우)이를 변환하는 롤업 플러그인을 만들 수 있습니다.

번들이 작성 될 때 방출되므로 transform 대신 generateBundle 후크를 사용해야 할 수도 있습니다.

작동하지 않으면. rpt2 자체에 사전 쓰기 후크를 추가 할 수 있습니다.

동일한 문제가 발생하여 여기 에서 해결 방법을 찾았습니다
현재 ttsc 를 typescript-transform-paths ttsc 와 함께 사용하여 롤업 된 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 : 정의되지 않은 'text'속성을 읽을 수 없습니다.

별칭 (및 이러한 플러그인) 사용에서 벗어나면 문제없이 작동합니다. 다른 사람이이 문제가 있습니까?

이 솔루션은 과거에 저에게 효과적 이었지만 지금은 다음과 같은 오류가 발생하는 많은 상황을 찾고 있습니다.

UnhandledPromiseRejectionWarning : TypeError : 정의되지 않은 'text'속성을 읽을 수 없습니다.

별칭 (및 이러한 플러그인) 사용에서 벗어나면 문제없이 작동합니다. 다른 사람이이 문제가 있습니까?

같은 오류가 있습니다

이 솔루션은 과거에 저에게 효과적 이었지만 지금은 다음과 같은 오류가 발생하는 많은 상황을 찾고 있습니다.

UnhandledPromiseRejectionWarning : TypeError : 정의되지 않은 'text'속성을 읽을 수 없습니다.

별칭 (및 이러한 플러그인) 사용에서 벗어나면 문제없이 작동합니다. 다른 사람이이 문제가 있습니까?

안녕하세요, 저는 동일한 문제를 발생시키고 있지만 다른 맥락에서 : 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 })
    ]
  }
];

별칭을 해결하기 위해 rollup --config ttsc --emitDeclarationOnly 명령 다음에 이미 .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 ()). 롤업 후 tsc-alias를 사용하여 문제를 해결했습니다. 생성 후 .d.ts 파일을 처리하기 때문에 vue 파일도 대체합니다.

문제를 해결하기 위해 롤업 후 tsc-alias 를 사용했습니다. 생성 후 .d.ts 파일을 처리하기 때문에 vue 파일도 대체합니다.

@mantlebee tsconfig.json 및 롤업 구성의 예를 게시 해 주시겠습니까?

하지만 @zerollup/ts-transform-paths 및 ttypescript 하면 작동합니다 🎉

@luanorlandi 가 런타임에 ts-transform-path 작동하지 않습니까? 아마도 라이브러리 코드에 대한 좋은 생각은 아닐 것입니다.

문제를 해결하기 위해 롤업 후 tsc-alias 를 사용했습니다. 생성 후 .d.ts 파일을 처리하기 때문에 vue 파일도 대체합니다.

@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 의 솔루션을 확인

물론 jest 와 같은 dist/src 폴더를 피하도록 다른 모든 lib를 구성해야합니다.

하지만 @zerollup/ts-transform-paths 및 ttypescript 하면 작동합니다 🎉

@luanorlandi 가 런타임에 ts-transform-path 작동하지 않습니까? 아마도 라이브러리 코드에 대한 좋은 생각은 아닐 것입니다.

나는 그렇게 생각하지 않는다. 변환기는 라이브러리가 설명 하듯이 빌드 단계만을위한 것이다.

_... tsconfig baseUrl + 번들 및 선언 파일에서 별칭 재 작성 경로. 그들 모두는 transpiled js와 d.ts 파일에서 relative로 다시 작성됩니다.

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