介绍

前段时间写了一个npm工具【swagger2-to-ts】，虽然完成了功能编写。但是，整体的代码是比较差强人意的。首先缺少的就是打包，所以就使用rollup做了一个打包，这篇文章把相关的配置记录下来。

准备

去rollup官网温习下相关的配置等信息，然后看下它提供的模板项目【rollup-starter-lib】和【rollup-starter-app】，我们是工具库，所以参考lib项目。

安装

npm install rollup typescript tslib rollup-plugin-terser -D
npm install @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript -D
npm install @rollup/plugin-json -D

node相关：

npm install nodemon ts-node @types/node -D

配置

rollup.config.js

import typescript from '@rollup/plugin-typescript'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import terser from '@rollup/plugin-terser'
import pkg from './package.json'
import copy from 'rollup-plugin-copy'

export default [
  {
    input: 'src/main.ts',
    output: {
      name: 'index',
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
      banner: '#!/usr/bin/env node',
    },
    plugins: [
      commonjs(), // so Rollup can convert `ms` to an ES module
      json(),
      resolve(), // so Rollup can find `ms`
      typescript(),
      copy({
        targets: [{ src: 'templates', dest: 'dist' }],
      }),
      terser()
    ],
  },
  // {
  //   input: 'src/main.ts',
  //   output: [
  //     { file: pkg.main, format: 'cjs' },
  //     { file: pkg.module, format: 'es' },
  //   ],
  //   plugins: [
  //     commonjs(), // so Rollup can convert `ms` to an ES module
  //     json(),
  //     resolve(), // so Rollup can find `ms`
  //     typescript(),
  //   ],
  // },
]

tsconfig.json

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    // 库使用dom， dom可迭代
    "lib": [
      "ESNext",
      "DOM",
      "DOM.Iterable"
    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
    /* Modules */
    "module": "esnext" /* Specify what module code is generated. */,
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    // 模块解析策略是node
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,

    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  // 只编译 src 目录下的文件
  "include": ["src"],
  "exclude": [""]
}

package.json

{
  "name": "swagger2-to-ts2",
  "version": "0.1.0",
  "main": "dist/index.cjs.js",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^25.0.0",
    "@rollup/plugin-json": "^6.0.0",
    "@rollup/plugin-node-resolve": "^15.0.2",
    "@rollup/plugin-terser": "^0.4.3",
    "@rollup/plugin-typescript": "^11.1.1",
    "@types/node": "^20.2.5",
    "nodemon": "^2.0.22",
    "rollup": "^2.79.1",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-terser": "^7.0.2",
    "ts-node": "^10.9.1",
    "tslib": "^2.5.2",
    "typescript": "^5.0.4"
  },
  "scripts": {
    "debug": "nodemon",
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "pretest": "npm run build"
  },
  "keywords": [
    "swagger2",
    "typescript",
    "codegen"
  ],
  "author": "gyj",
  "license": "MIT",
  "bin": {
    "swagger2-to-ts2": "dist/index.cjs.js",
    "stt2": "dist/index.cjs.js"
  },
  "files": [
    "dist",
    "templates",
    "swagger2ts.json"
  ],
  "dependencies": {
    "axios": "^1.4.0",
    "chalk": "^4.1.2",
    "commander": "^10.0.1",
    "ejs": "^3.1.9"
  }
}

打包

npm run build

过程中的问题

rollup不识别commonJS
网上都说使用库：@rollup/plugin-commonjs。安装和配置后，运行打包发现require还在打包后的代码中，且关联的文件也没有被编译到文件中。后来仔细研读相关网站了解到：

原因：rollup默认是支持ESM模式的模块化的，但是不支持commonJS。

路径问题

path.sep：编写工具时，需要考虑不同的系统，mac、window等，它们的路径是不一样的。所以，在node中需要使用【path.sep】；
盘符：mac、linux系统是没有盘符的概念的，但是window系统有盘符，所以在操作文件时，需要注意这些；
获取资源或者模板问题：在工具库中有两种路径，一个是开发者的开发目录，另一个是工具的所在目录。所以获取资源，需要清楚两者的路径：process.cwd()和__dirname。

rollup打包typescript编写的工具库

介绍

准备

安装

配置

打包

过程中的问题