gulp+rollup结合打包自己的TS/JS库

最新推荐文章于 2025-10-13 05:46:12 发布

原创最新推荐文章于 2025-10-13 05:46:12 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

TypeScript 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何结合gulp和rollup来打包TypeScript和JavaScript库。作者提供了gulpfile.js、package.json和tsconfig.json的配置示例，并说明了将源代码放在src文件夹中，通过npm安装依赖并运行gulp命令，即可在dist目录下生成d.ts和js文件。

由于项目需要，网上找了不少资料，总结了一套适合项目的打包流程，把ts代码打包成js库

首先是gulpfile.js文件，直接贴上代码：

const gulp = require('gulp')
const rollup = require('rollup')
const clean = require('gulp-clean')
const rename = require("gulp-rename");
const uglify = require('gulp-uglify-es').default;

const rollupTypescript = require('rollup-plugin-typescript2')

gulp.task('clean', function () {
    return gulp
        .src('dist', { read: false, allowEmpty: true })
        .pipe(clean('dist'));
});



gulp.task('clean-js', function () {
    return gulp
        .src('dist/**/*.js', { read: false })
        .pipe(clean('*.js'));
});


gulp.task("build", async function () {
    const subTask = await rollup.rollup({
        input: "src/XH.ts",
		output: {
			file: 'dist/XHLib.js',
			format: 'umd', //iife
            extend: true,
			name: 'XH'
		  },
        plugins: [
            rollupTypescript()
        ]
    });
	
	await subTask.write({
            file: 'dist/XHLib.js',
			format: 'umd', //iife
            extend: true,
			name: 'XH'
        });
});

 gulp.task("uglify", function () {
     return gulp.src("dist/*.js")
         .pipe(rename({ suffix: '.min' }))
         .pipe(uglify(/* options */))
         .pipe(gulp.dest("dist/"));
 });

gulp.task('default'
    , gulp.series(
        gulp.parallel('clean'),
        gulp.parallel('clean-js'),
        gulp.parallel('build'),
        gulp.parallel('uglify')
    )
)

然后是package.json

{
  "name": "XHLib",
  "version": "1.0.0",
  "description": "",
  "main": "XHLib.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "SixSir",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.8.3",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-rename": "^2.0.0",
    "gulp-uglify-es": "^2.0.0",
    "rollup": "^2.0.6",
    "rollup-plugin-typescript2": "^0.26.0"
  }
}

最后是tsconfig.json：

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "noEmitHelpers": false,
    "sourceMap": false,
    "declaration": true,
    "noImplicitReturns":false,
    "allowUnreachableCode":false
  },
  "exclude": [
    "node_modules"
  ]
}