Generate typescript definition files using rollup

Question

I am trying rollup js to build my typescript project but I don't know how to generate the definition files and how to include them automatically in the dist files.

Would anyone know how to do it ?

Here is my rollup.config.js

import typescript from "rollup-plugin-typescript";
import handlebars from "rollup-plugin-handlebars";
import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/generator.ts',
  format: 'cjs',
  plugins: [
    typescript(),
    handlebars(),
    babel()
  ],
  dest: 'dist/bundle.js'
};

I'm using the default ts config but that's the same with declaration=true.

edit :

Also trying using Webpack :

    module.exports = {
      context: __dirname + '/src',
      entry: {
        index: './generator'
      },
      output: {
        path: __dirname + '/build',
        publicPath: '/',
        filename: 'generator.js'
      },
      resolve: {
        root: __dirname,
        extensions: ['', '.ts', '.js']
      },
      module: {
        loaders: [
          { test: /\.ts$/, loaders: ['ts-loader'], exclude: /node_modules/ },
          { test: /\.hbs/, loaders: ['handlebars-loader'], exclude: /node_modules/ }
        ]
      }
    }

Tsconfig :

    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": true,
        "outDir": "build"
      },
      "exclude": [
        "node_modules",
        "dist",
        "build"
      ]
    }

The generate d.ts looks like this :

    import { ExportPageModel } from './models/page-model';
    export declare type ExportType = 'text' | 'html';
    export * from './models/page-model';
    export declare namespace Generator {
        function generateHtml(page: ExportPageModel): string;
        function generateText(page: ExportPageModel): string;
    }

But in my app using that package, it can't find the Generator...

import { ExportPageModel, Generator } from 'emlb-generator';

Generator is undefined but the auto completion works fine so I can't find where is the problem :(

Generator.generateHtml({
 ...
});

Thiago Valentim · Accepted Answer · 2019-12-28 18:22:06Z

To do this task you are going to add instructions into rollup.config.js, tsconfig.json and package.json

Considering Rollup version ^0.62.0":

1 - Add library of rollup-plugin-typescript2:

npm i rollup-plugin-typescript2

2 - Import the library inside the rollup.config.js

import typescript from 'rollup-plugin-typescript2'

3 - Include the typescript plugin inside the plugin block

Notes: the js bellow is just an example, so I removed other instructions only to keep the example cleaner...

import typescript from 'rollup-plugin-typescript2'

export default {
  input: 'src/index.tsx',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      exports: 'named',
      sourcemap: true
    },
    {
      file: pkg.module,
      format: 'es',
      exports: 'named',
      sourcemap: true
    }
  ],
  plugins: [
    typescript({
      rollupCommonJSResolveHack: false,
      clean: true,
    })
  ]
}

4 - Add the declaration instruction in the compilerOptions of the tsconfig.json

Notes: I removed other instruction only to keep the example cleaner...

Example:

{
  "compilerOptions": {
    "declaration": true,
  },
  "include": ["src"],
  "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
}

5 - include the main and module instruction inside the package.json to inform where will be the output.

And finnaly, include the rollup -c instruction inside the script of the package.json, example:

{
  "name": "example",
  "version": "0.1.6",
  "description": "Testing",
  "author": "Example",
  "license": "AGPL-3.0-or-later",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "scripts": {
    "build": "rollup -c",
    "start": "rollup -c -w"
  },
  "files": [
    "dist"
  ]
}

basarat · Accepted Answer · 2016-12-27 00:57:59Z

-4

typescript definition files using rollup

Highly recommend you compile using just tsc. Reserve rollup for final application bundling.

Example

For examples checkout the build in typestyle https://github.com/typestyle/typestyle/blob/2349f847abaaddaf3de4ca83f585d293b766959e/package.json#L10

answered Dec 27, 2016 at 0:57

basarat

278k60 gold badges475 silver badges528 bronze badges

4 Comments

BkSouX Over a year ago

ok but im using handlebars as an external dependency and how the templates would be managed using tsc ?

BkSouX Over a year ago

when I tried to build just using tsc, It cannot find the template : Cannot find module './templates/html/html.structure.template.hbs'

bugwheels94 Over a year ago

tsc is very slow compared to babel with preset typescript

fraxture Over a year ago

Why do you recommend this approach?

Collectives™ on Stack Overflow

Generate typescript definition files using rollup

2 Answers 2

1 Comment

Example

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Example

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related