支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目

支持TypeScript并打包为ESM、CommonJS和UMD三种格式的脚手架项目

NODE 版本要求

node v16.17.1 npm 8.15.0

设置淘宝镜像

bash 复制代码

npm set registry https://registry.npmjs.org/
cnpm set registry https://registry.npmjs.org/

安装依赖

bash 复制代码

npm install

打包

bash 复制代码

npm run build

脚手架介绍

支持TypeScript并打包为ESM、CommonJS和UMD三种格式的脚手架项目

脚手架解决方案概述

Rollup - 高效的JavaScript打包工具
TypeScript - 支持类型安全的开发
Terser - 代码压缩工具
ESLint & Prettier - 代码质量和风格统一

项目结构

bash 复制代码

dist/
  index.esm.js      # ES模块格式
  index.js          # CommonJS格式
  index.umd.js      # UMD格式
src/
  index.ts          # 主入口文件
.eslintrc           # ESLint配置
.gitignore          # Git忽略规则
.prettierrc         # Prettier配置
package.json        # 项目配置
rollup.config.js    # Rollup配置文件
tsconfig.json       # TypeScript配置

.eslintrc文件

perl 复制代码

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:prettier/recommended"
    ],
    "rules": {
      "@typescript-eslint/no-unused-vars": "warn",
      "@typescript-eslint/explicit-module-boundary-types": "off"
    }
  }

.gitignore 文件

bash 复制代码

node_modules
dist
*.log
.DS_Store

.prettierrc 文件

json 复制代码

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always"
}

package.json文件

perl 复制代码

{
  "name": "ts-multi-format-bundler",
  "version": "1.0.0",
  "description": "TypeScript multi-format bundler",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "browser": "dist/index.umd.js",
  "types": "dist/index.d.ts",
  "type": "module",
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "lint": "eslint src --ext .ts",
    "format": "prettier --write \"src/**/*.ts\""
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^25.0.4",
    "@rollup/plugin-node-resolve": "^15.2.1",
    "@rollup/plugin-typescript": "^11.1.2",
    "@typescript-eslint/eslint-plugin": "^6.3.0",
    "@typescript-eslint/parser": "^6.3.0",
    "eslint": "^8.46.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "prettier": "^3.0.0",
    "rollup": "^3.28.0",
    "rollup-plugin-dts": "^6.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "tslib": "^2.6.2",
    "typescript": "^5.1.6"
  },
  "keywords": [
    "typescript",
    "rollup",
    "esm",
    "cjs",
    "umd"
  ]
}

rollup.config.js 文件

python 复制代码

import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import dts from 'rollup-plugin-dts';

const production = !process.env.ROLLUP_WATCH;

export default [
  // 主构建配置
  {
    input: 'src/index.ts',
    output: [
      {
        file: 'dist/index.esm.js',
        format: 'esm',
        sourcemap: !production
      },
      {
        file: 'dist/index.js',
        format: 'cjs',
        sourcemap: !production
      },
      {
        file: 'dist/index.umd.js',
        format: 'umd',
        name: 'MyLibrary',
        sourcemap: !production
      }
    ],
    plugins: [
      nodeResolve(),
      commonjs(),
      typescript({
        tsconfig: './tsconfig.json',
        exclude: ['**/__tests__/**']
      }),
      production && terser()
    ]
  },
  // 类型声明文件生成
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/index.d.ts',
      format: 'es'
    },
    plugins: [dts()]
  }
];

tsconfig.json文件

json 复制代码

{
    "compilerOptions": {
      "target": "es6",
      "module": "esnext",
      "declaration": true,
      "declarationMap": true,
      "sourceMap": true,
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "moduleResolution": "node",
      "outDir": "dist",
      "rootDir": "src"
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules", "dist"]
  }