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

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

码云地址

NODE 版本要求

node v16.17.1
npm 8.15.0

设置淘宝镜像

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

安装依赖

npm install

打包

npm run build

脚手架介绍

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

脚手架解决方案概述

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

项目结构

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文件

{"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 文件

node_modules
dist
*.log
.DS_Store

.prettierrc 文件

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

package.json文件

{"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 文件

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文件

{"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"]}