CODEWITHSUNDEEP
typescriptrollup
Freewind
Freewind

Reputation: 198318

Does rollup support typescript in rollup config file?

It seems we can use typescript to write rollup config file. Say, I can create a file named rollup.config.ts, with content:

import typescript from 'rollup-plugin-typescript2';

export default {
  input: 'main.ts',
  plugins: [typescript()],
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  external: ['lodash']
}

It's working if I invoke rollup as rollup -c rollup.config.ts.

But if I use some typings in it:

import typescript from 'rollup-plugin-typescript2';
import {RollupFileOptions} from "rollup";

const config: RollupFileOptions = {
  input: 'main.ts',
  plugins: [typescript()],
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  external: ['lodash']
}

export default config;

It will report errors like:

$ rollup -c rollup.config.ts
[!] Error: Unexpected token
rollup.config.ts (4:12)
2: import {RollupFileOptions} from "rollup";
3: 
4: const config: RollupFileOptions = {
                 ^

Is it possible to make it work? I tried to use ts-node with

Upvotes: 35

Views: 23009

Answers (7)

weiya ou
weiya ou

Reputation: 4338

Rollup v3 TypeScript configuration

devDependencies

npm i -D typescript tslib @types/node rollup @rollup/plugin-typescript

import type { RollupOptions } from 'rollup';

const config: RollupOptions = {
    /* your config */
};
export default config;

"build": "rollup -c --configPlugin typescript"

If it is rollup.config.ts name can be omitted.

Remember to add rollup.config.ts in the tsconfig.json file, as I tripped up at this step.

"include": ["src/**/*.ts", "rollup.config.ts"],

Rollup documentation

https://rollupjs.org/command-line-interface/#config-intellisense

Upvotes: 2

Ffloriel
Ffloriel

Reputation: 488

You can create your rollup configuration in TypeScript

import { RollupOptions } from "rollup";

const bundle: RollupOptions = {
//...
}
export default bundle

and use it with

rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript

You will need to add rollup.config.ts to the included files in your tsconfig.json.

{
    "include": ["src/**/*", "rollup.config.ts"]
}

Upvotes: 32

Eliav Louski
Eliav Louski

Reputation: 5274

it is actually possible, just import defineConfig from rollup and this will give your great IDE suggestions, for example:

//rollup.config.js

import { defineConfig } from 'rollup';

const rollupConfig = defineConfig({
  input: 'src/index.tsx',
  output: [
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs',
    },
  ],
});

export default rollupConfig;

Upvotes: 7

Sid Vishnoi
Sid Vishnoi

Reputation: 1318

With Rollup v2.52.0, you can specify a --configPlugin option as:

rollup --config rollup.config.ts --configPlugin typescript

Upvotes: 8

aleclarson
aleclarson

Reputation: 19045

For the fastest compilation, go with this:

npm install sucrase -D

And in your rollup.config.js, do this:

require('sucrase/register')
module.exports = require('./rollup.config.ts')

https://github.com/alangpierce/sucrase

Upvotes: -3

Daniel Moore
Daniel Moore

Reputation: 1126

You can create a separate rollup.config.js that looks like this:

require('ts-node').register({
  compilerOptions: {
    module: 'CommonJS'
  },
  // and other tsconfig.json options as you like
});

module.exports = require('./rollup.config.ts');

You'll need to npm install --save-dev ts-node of course. Then run npx rollup -c and you're off to the races.

Upvotes: 13

Rannie Aguilar Peralta
Rannie Aguilar Peralta

Reputation: 1752

For the meantime, while it is not yet supported, JSDoc might be come useful to type check the rollup configuration. (It only works on editor that support JSDoc. e.g. VSCode).

/** @type {import('rollup').RollupOptions} */
const options = {
  ...
};

export default options;

Upvotes: 46

Related Questions