用nodejs写的一个简单项目打包工具

下面是详细的讲解“用nodejs写的一个简单项目打包工具”的完整攻略：

1. 需求分析

在开始编写项目打包工具之前，需要对需求做出明确的分析和规划。主要包括以下几个方面：

支持哪些类型的文件打包，如HTML、CSS、JavaScript等
支持哪些打包方式，如合并、压缩等
如何读取文件，如何输出打包结果
支持哪些配置项，如输入文件路径、输出目录、打包规则等
是否需要支持命令行参数，如打包类型、输出目录等

2. 技术选型

选择合适的技术栈是保证项目顺利完成的重要前提。在打包工具的编写中，可以使用Node.js作为开发语言，并使用一些常用的第三方库来辅助开发。

具体的技术选型如下：

Node.js：作为后端开发语言，提供了强大的模块化功能和文件IO操作能力。
Commander.js：用于处理命令行参数。
Chalk.js：用于打印彩色的控制台输出。
Inquirer.js：用于交互式命令行界面。

3. 项目结构

在开始编写代码之前，需要规划好项目结构和文件组织方式，这有助于提高代码的可读性和可维护性。

一个合理的项目结构应该包含以下几个部分：

bin：存放可执行的脚本文件。
src：存放项目的源代码，包含JS文件和CSS文件。
dist：存放最终的打包结果，包含合并后的JS文件和CSS文件。
utils：存放项目的工具函数。

4. 代码实现

在编写代码之前，需要将需求和技术选型中的内容转化为具体的代码实现。主要包括以下几个步骤：

4.1 安装依赖

在开始编写代码之前，需要安装相关依赖：

npm install commander chalk inquirer --save

4.2 处理命令行参数

Commander.js是一款处理命令行参数的库，它可以快速实现常用的命令行功能。下面的代码演示了如何使用Commander.js处理命令行参数：

const program = require('commander');

program
  .command('pack')
  .description('打包项目')
  .option('-i, --input <path>', '输入文件夹路径')
  .option('-o, --output <path>', '输出文件夹路径')
  .action(cmd => {
    console.log('打包中...');
    console.log(`输入文件夹路径：${cmd.input}`);
    console.log(`输出文件夹路径：${cmd.output}`);
  });

program.parse(process.argv);

4.3 获取文件列表

在打包工具中，需要读取指定文件夹下的文件列表，并提取需要打包的文件。下面的代码演示了如何获取指定文件夹下的所有文件，并根据配置信息筛选需要打包的文件：

const fs = require('fs');
const path = require('path');

function getFilesFromFolder(folderPath, exts) {
  const dirArr = [];

  const files = fs.readdirSync(folderPath);

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const filepath = path.join(folderPath, file);

    const stats = fs.statSync(filepath);

    if (stats.isDirectory()) {
      dirArr.push(filepath);
    } else if (stats.isFile() && exts.includes(path.extname(filepath))) {
      fileList.push(filepath);
    }
  }

  for (let i = 0; i < dirArr.length; i++) {
    getFilesFromFolder(dirArr[i], exts);
  }
}

4.4 合并文件

在获取文件列表之后，需要将相同类型的文件合并为一个文件。下面的代码演示了如何将多个JS文件合并为一个文件：

const fs = require('fs');
const path = require('path');

function concatFiles(fileList, outputFilename) {
  const contentArr = [];

  for (let i = 0; i < fileList.length; i++) {
    const filepath = fileList[i];

    const fileContent = fs.readFileSync(filepath, 'utf-8');
    contentArr.push(fileContent);
    contentArr.push('\n'); // 为了保证文件间的内容不会重复
  }

  const outputFilePath = path.join(outputDir, outputFilename);
  fs.writeFileSync(outputFilePath, contentArr.join(''), 'utf-8');
}

4.5 压缩文件

合并文件后，需要将文件进行压缩以减小文件大小。使用UglifyJS可以对JS文件进行压缩，使用CleanCSS可以对CSS文件进行压缩。

4.6 输出文件

在完成打包工作之后，需要将打包结果输出到指定的文件夹中。下面的代码演示了如何将打包结果输出到指定的文件夹中：

const fs = require('fs');
const path = require('path');

function outputFiles(fileList, outputDir) {
  for (let i = 0; i < fileList.length; i++) {
    const filepath = fileList[i];
    const outputFilename = path.basename(filepath);

    const content = fs.readFileSync(filepath, 'utf-8');

    const outputPath = path.join(outputDir, outputFilename);

    fs.writeFileSync(outputPath, content, 'utf-8');
  }
}

5. 示例说明

下面给出两个示例以说明如何使用该打包工具进行打包。

示例一

假设我们有以下文件夹结构：

src
├── js
│   ├── a.js
│   ├── b.js
│   └── c.js
└── css
    ├── a.css
    ├── b.css
    └── c.css

我们需要将src文件夹下的所有JS和CSS文件打包成一个文件，输出到dist文件夹中。可以通过以下命令实现：

node bin/entry.js pack -i src -o dist

示例二