rollup.js JavaScript 模块打包器,相比webpack配置更简单轻量。适合library使用的打包工具。

它的特点：

  1. 只想快速配置开发个小工具
  2. 要用ES6+语法开发
  3. 代码清洁，清理无用代码(tree-shaking)

它输出各种模块规范：AMD、CommonJS、UMD和IIFE 。

Rollup + TS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// rollup.config.js
const path = require('path');
const pkg = require('./package.json');
import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import sourceMaps from 'rollup-plugin-sourcemaps';
import dts from "rollup-plugin-dts";

const resolveFile = function(filePath) {
  return path.join(__dirname, '.',filePath)
}

export default [
  {
    input: resolveFile('src/index.ts'),
    output: [
      {
        dir: 'es',
        format: "es",
      }
    ],
    plugins: [
      typescript({'tsconfig':'./tsconfig.json'}),
      sourceMaps(),
      resolve(),
    ],
    external: ['mxgraph', 'x2js'],
  },
  {
    // 生成 .d.ts 类型声明文件
    input: resolveFile('./src/index.ts'),
    output: {
      file: resolveFile(pkg.types),
      format: 'es',
    },
    plugins: [dts()],
  }
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "strictFunctionTypes": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": false,
    "noImplicitAny": false,
    "declaration": true,
    "declarationDir": "es",
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "**/*.ts",
  ],
  "exclude": [
    "node_modules",
    "**/node_modules"
  ]
}

参考

https://chenshenhai.github.io/rollupjs-note/
https://juejin.cn/post/6844904035309322254
https://medium.com/@martin_hotell/typescript-library-tips-rollup-your-types-995153cc81c7