rollup.config.ts 不能用ts吗？

Question

// rollup.config.ts
import { RollupOptions } from 'rollup'
let config: RollupOptions =  {
    // ...
}
export defult config

// package.json
    "scripts": {
        "roll": "rollup -c src/rollup.config.ts"
    },
    "dependencies": {
        "@rollup/plugin-commonjs": "21.0.1",
        "@rollup/plugin-node-resolve": "13.1.3",
        "@rollup/plugin-replace": "3.0.1",
        "@rollup/plugin-typescript": "8.3.0",
        "rollup": "2.56.3",
        "rollup-plugin-prettier": "2.2.2",
        "rollup-plugin-scss": "3.0.0",
        "rollup-plugin-terser": "7.0.2",
    },

我在终端运行pnpm run roll得到如下报错。百度也没找到什么相似的解答。
这个配置文件不能用ts吗，我希望能用RollupOptions的提示，请问该怎么写呢？

> kd@0.0.0 roll D:\gitee\rollup研究
> rollup -c src/rollup.config.ts

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\rollup.config.ts (32:10)
30: const BUILD_ENV = process.env.BUILD_ENV;
31:
32: let config: RollupOptions =  {
              ^
33:     input: `${SRC}/${'hud'}/script.tsx`,
34:     output: {
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (D:\gitee\rollup研究\node_modules\.pnpm\rollup@2.56.3\node_modules\rollup\dist\shared\rollup.js:151:30)
    at Module.error (D:\gitee\rollup研究\node_modules\.pnpm\rollup@2.56.3\node_modules\rollup\dist\shared\rollup.js:10059:16)
    at Module.tryParse (D:\gitee\rollup研究\node_modules\.pnpm\rollup@2.56.3\node_modules\rollup\dist\shared\rollup.js:10462:25)
    at Module.setSource (D:\gitee\rollup研究\node_modules\.pnpm\rollup@2.56.3\node_modules\rollup\dist\shared\rollup.js:10365:24)
    at ModuleLoader.addModuleSource (D:\gitee\rollup研究\node_modules\.pnpm\rollup@2.56.3\node_modules\rollup\dist\shared\rollup.js:19708:20)
    at ModuleLoader.fetchModule (D:\gitee\rollup研究\node_modules\.pnpm\rollup@2.56.3\node_modules\rollup\dist\shared\rollup.js:19761:9)
    at async Promise.all (index 0)

 ELIFECYCLE  Command failed with exit code 1.

Answer 1

不可以。因为运行环境是Node.js，除非你自己使用ts-node处理关系。

要增加类型提示，可以使用JSDoc https://www.typescriptlang.or...

Answer 2

看 rollup 的文档，这里有示例

先安装 @rollup/plugin-typescript，然后用 --configPlugin 参数指定 TypeScript

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

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

题主的问题应该是想用ts来定义rollup.config的内容，而不是用js来做，包括使用ts的一些特性。

正确的使用方式是需要在rollup使用配置文件打包时用cjs加载配置文件

例子：

 rollup -c rollup.config.ts  --bundleConfigAsCjs