rollup 开发 ts 模块总结

作者自由如风

使用 rollup.config.ts 文件作为 rollup 的配置

tsconfig.json
    "module": "esnext",   

    "moduleResolution": "node",
你需要的开发依赖是
"@rollup/plugin-typescript": "^11.0.0",
"tslib": "^2.4.1",
"typescript": "^4.9.4"
版本为示例版本，建议安装最新的。
output配置

建议同时输出 es 和 cjs 两个格式

# rollup.config.ts
output: [
        {
            file: './dist/bundle.ejs',
            format: 'es',
        },
        {
            file: './dist/bundle.cjs',
            format: 'cjs',
        }
    ]

在 package.json 中配置

  "main": "./dist/bundle.cjs",
  "module": "./dist/bundle.ejs",

这样即可使用 require 导入 ，也可以使用 import 导入。

编译脚本
# package.json
"scripts": {
    "build": "rollup --config rollup.config.ts --configPlugin typescript"
  },

编译类型声明文件

在 rollup.config.ts 的插件中配置如下

plugins: [
        del({targets: 'dist/*'}),
        typescript({
            compilerOptions: {declaration: true, outDir: './dist'},
            include: "src/**/*"
        })
    ],

排除模块

在 rollup.config.ts 的插件中配置如下

// input
// output
// plugins
external: ['axios']

建议依赖格式

"peerDependencies": {
    "axios": "^1.2.2"
  }

使用 jest 测试

需要的依赖:
jest
@types/jest

防止编译test目录，可以这样做

# rollup.config.ts
plugins: [
        del({targets: 'dist/*'}),
        typescript({
            compilerOptions: {declaration: true, outDir: './dist'},
            include: "src/**/*"
        })
    ],

类似文章