37

I can't find a way to generate d.ts and d.ts.map files using webpack. babel-loader only generates js and js.map files. I also need d.ts and d.ts.map files (which I was able to generate using tsc command) as shown in this picture:

enter image description here

Here is a minimal repo that contains all the settings: https://github.com/stavalfi/lerna-yarn-workspaces-example

More Details

I moved to Lerna + yarn. One of my packages is core (will be used in other packages) which is written in TS and JS.

I'm using webpack 4,babel-loader 8 for ts-to-js.

The other packages are trying to find type definitions and implementation of my core package but I was only able to generate index.js and index.js.map with webpack:

output: {
    path: distPath,
    filename: 'index.js',
  },
{
  "extends": "../tsconfig.settings.json",
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "declarationDir": "dist",
    "rootDir": "src",
    "outDir": "dist"
  }
}
  • When I compile with tsc (without webpack), everything is working great as I showed in the picture above.

Does my strategy is wrong? what should I do?

I have tried a lot of plugins that generate d.ts files but they don't work and doesn't create d.ts.map files.

I already tried: typescript-declaration-webpack-plugin, npm-dts-webpack-plugin, dts-bundle-webpack, @ahrakio/witty-webpack-declaration-files. (They are listed in the package.json of core so you can clone and play with it).

Stav Alfi
  • 13,139
  • 23
  • 99
  • 171
  • From my understanding (read about 10min) babel doesn't actually compile your tsc, it just removes it all to plain js? So there's no way it's going to spit out type definitions for you? Seems like you would have to have webpack use ts-loader or something and then spit out your js files to be included by babel. (hopefully someone more familiar can answer your question with more certainty!) – Cody Ｇ Mar 23 '19 at 21:55
  • 1
    You understood it right. I don't want to move to `ts-loader` because I need babel for all the packages code. I also edited the question to make it more clear. – Stav Alfi Mar 23 '19 at 22:03

2 Answers2

6

Running ts-loader before babel-loader will do the trick.

Specifying that you want declaration files in config is all you need.

If you are using an absolute path, the output d.ts files will also contain absolute paths which are useless and will result in typescript compilation errors.

To fix that, I wrote a plugin to convert an absolute path to a relative path: https://github.com/stavalfi/babel-plugin-module-resolver-loader

Stav Alfi
  • 13,139
  • 23
  • 99
  • 171
  • 1
    Instead of installing another loader (ts-loader), you can also add `'tsc'` at the end of your build command but you have configure your `ts.config` so it emits only the types declaration as shown here https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html – mukuljainx Jan 25 '21 at 13:26
  • 1
    I'm having the same issue but moving `ts-loader` up the loaders arrays to before `babel-loader` did not do anything. no `d.ts` or map files have been generated. Is this answer still valid? – dror May 10 '22 at 10:58
2

You can call the Typescript compiler tsc directly to do that.

Use tsc --declaration to output a .d.ts file and tsc --declarationMap to generate the corresponding map file.

You can find more documentation here: https://www.typescriptlang.org/docs/handbook/compiler-options.html

edwin
  • 2,643
  • 20
  • 17