Zoeken op website

reactjs - Typescript declaratiebestand aangemaakt met alias in plaats van relatieve pad

Bewerking 1: GitHub-URL aan project toegevoegd

Bewerking 2: Het verwijderen van baseUrl uit tsconfig.json lost alle problemen op en het gebruik van relatieve imports werkt prima.

Link: Github

Hoe genereer ik een TypeScript-declaratiebestand met relatieve paden in plaats van alias?

Ik maak een bibliotheek (samplelibrary) in UMD-modus en publiceer deze op npm. De verpakte npm-bibliotheek bevat alleen de map build (met typings), package.json en README.md

Wanneer ik probeer de bibliotheek te gebruiken in een andere TypeScript-app, mislukt de build vanwege een ongeldig typeverklaringsbestand dat wordt gegenereerd. Het typeverklaringsbestand bevat een alias in plaats van een relatieve pad.

Compilatie-log:

FOUT in /workspace/myproject/node_modules/samplelibrary/build/typings/src/foo.d.ts(403,17): TS2307: Kan module 'utils/bar' niet vinden

Hoe dit probleem op te lossen?

Eigenlijk aangemaakt declaratiebestand foo.d.ts:

declare const Foo: {
   bar: typeof import("utils/bar");
}

Verwacht bestand:

declare const Foo: {
   bar: typeof import("./utils/bar");
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "rootDir": "./",
    "baseUrl": "./src",
    "paths": {
      "@samplecompany/sampleproject": ["./"]
    },
    "outDir": "build",
    "removeComments": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "declaration": true,
    "declarationDir": "typings",
    "importHelpers": true
  },
  "files": ["types/untyped-modules.d.ts"],
  "include": [
    "src/**/*",
    "test/**/*",
    "build/**/*",
    "styleguide-renderer/**/*"
  ],
  "exclude": ["node_modules"]
}

Mapstructuur:

root
  -src
    -utils
       -bar.ts
    -foo.ts

utils/bar.ts

export const bar = {
   hello: "World"
}

src/foo.ts

import { bar } from "./utils/bar.ts

export default const Foo = {
    bar
};

Antwoord #1

Nou, het leek alsof het niet zou werken zonder grote trucs, maar uiteindelijk heb ik het uitgezocht. Het probleem is dat de padverklaringen van types herschreven moeten worden. Om dit te doen heb je een bundler/compiler nodig die dit voor je doet. Ik veronderstel dat er verschillende pakketten zijn die dit doen voor tsc-gebaseerde compilatie, maar in mijn geval gebruik ik Rollup, dus waren er niet zo veel. Nou, ik vond er maar één https://github.com/zerkalica/zerollup/tree/master/packages/ts-transform-paths

Er staan daar instructies om je te helpen het te gebruiken. Maar eigenlijk hoef je alleen het volgende te doen:

  1. Installeer yarn add -D @zerollup/ts-transform-paths ttypescript
  2. Voeg het toe in je rollup.config.js
  3. Voeg de plugin toe aan je tsconfig.json met "plugins": [{ "transform": "@zerollup/ts-transform-paths" }]

En nu zijn mijn paden herschreven van bijvoorbeeld @react naar "../../react/file". Jippie!

En voor de zekerheid, hier zijn mijn configuraties:

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "declaration": true,
    "declarationDir": "./dist",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@context/*": ["src/context/*"],
      "@pm/*": ["src/pm/*"],
      "@react/*": ["src/react/*"],
      "@typings/*": ["src/typings/*"]
    },
    "plugins": [{ "transform": "@zerollup/ts-transform-paths" }]
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

import alias from '@rollup/plugin-alias'
import typescript from 'rollup-plugin-typescript2'
import postcss from 'rollup-plugin-postcss'
import ttypescript from 'ttypescript'

import path from 'path'

import pkg from './package.json'

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'es',
    },
  ],
  external: [
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  plugins: [
    alias({
      entries: [
        { find: '@context', replacement: path.resolve(__dirname, 'src/context') },
        { find: '@pm', replacement: path.resolve(__dirname, 'src/pm') },
        { find: '@react', replacement: path.resolve(__dirname, 'src/react') },
        { find: '@typings', replacement: path.resolve(__dirname, 'src/typings') },
      ]
    }),
    typescript({
      typescript: ttypescript
    }),
    postcss()
  ],
}

Antwoord #2

Je hebt pech: TypeScript herschrijft geen importpaden. Zie deze afgewezen suggestie. Je zult het gebruik van aliassen in je bibliotheek moeten vermijden, tenzij je de aliassen ook in het project dat de bibliotheek gebruikt configureert.

Gerelateerde artikelen