汇总配置文件中的汇总是否支持 typescript？

Question

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

Answer 1

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. eg VSCode).

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

export default options;

Answer 2

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"]
}

Answer 3

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.

Answer 4

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

Answer 5

使用Rollup v2.52.0 ，您可以将--configPlugin选项指定为：

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

Answer 6

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;