如何通过Npm Scripts将文件夹中JS文件单独压缩至目标文件夹？

1. 用 terser 直接实现批量处理 #

你之前可能没用到terser的批量处理参数——它本身支持通配符和动态输出命名，完全能满足你的需求。在package.json的scripts里添加：

{
  "scripts": {
    "minify:js": "terser src/*.js --output dist/[name].min.js"
  }
}

• src/*.js 匹配src目录下所有js文件
• [name] 会自动替换为原文件名（去掉.js后缀），比如main.js会生成main.min.js
• 执行npm run minify:js就能完成批量单独压缩，输出到dist目录

如果需要递归处理src下的子文件夹，把通配符改成src/**/*.js即可；要是想保持子目录结构，输出参数改成dist/[dir]/[name].min.js就行，不过你要扁平化结构，用上面的命令就够。

2. 用 gulp + gulp-terser（适合多任务构建） #

如果你的项目还要处理Sass、图片等其他构建任务，用gulp会更灵活：

1. 安装依赖：

npm install gulp gulp-terser --save-dev

2. 新建gulpfile.js：

const gulp = require('gulp');
const terser = require('gulp-terser');

function minifyJs() {
  return gulp.src('src/*.js')
    .pipe(terser())
    .pipe(gulp.dest(file => {
      file.basename += '.min'; // 给文件名加上.min后缀
      return 'dist';
    }));
}

exports.minify = minifyJs;

3. 在package.json里添加脚本：

{
  "scripts": {
    "minify:js": "gulp minify"
  }
}

3. 用 rollup + rollup-plugin-terser（适合ES模块项目） #

如果你的JS文件是ES模块格式，rollup是个不错的选择：

1. 安装依赖：

npm install rollup rollup-plugin-terser --save-dev

2. 新建rollup.config.js：

import terser from 'rollup-plugin-terser';
import fs from 'fs';

// 自动读取src下所有JS文件
const inputFiles = fs.readdirSync('src')
  .filter(file => file.endsWith('.js'))
  .map(file => `src/${file}`);

// 为每个文件生成单独的配置
export default inputFiles.map(file => ({
  input: file,
  output: {
    file: file.replace('src/', 'dist/').replace('.js', '.min.js'),
    format: 'iife' // 可根据需求换成cjs/es等格式
  },
  plugins: [terser()]
}));

3. 在package.json里添加脚本：

{
  "scripts": {
    "minify:js": "rollup -c"
  }
}

总结 #

如果只是单纯的JS批量压缩，直接用terser命令行是最简便的方案，不需要额外引入构建工具；如果项目有复杂的多任务构建需求，gulp或rollup会更适配你的场景。

内容的提问来源于stack exchange，提问作者Meek