构建工具原理与实战：ES2017+技术新篇章

前端

2023-12-20 05:48:51

进入ES2017+时代，构建工具不再是前端开发的难题。诸如gulp、grunt、yeoman、metalsmith、fis3等复杂构建工具，都可以从你的脑海中永远划掉。

仅需100行代码，你就可以透视构建工具的本质，拥有一个现代化、规范、测试驱动、高延展性的构建工具。

1. 前端构建工具的演变

前端构建工具经历了从命令行工具到图形界面工具、从单一功能工具到多功能工具、从本地工具到云端工具的发展历程。

命令行工具：如gulp、grunt等，需要在命令行中输入命令来执行构建任务。
图形界面工具：如yeoman、metalsmith等，提供图形界面，使构建任务的执行更加直观和方便。
单一功能工具：如fis3等，只提供单一的功能，如文件压缩、代码合并等。
多功能工具：如webpack等，提供多种功能，如文件压缩、代码合并、代码转换等。
本地工具：如gulp、grunt、webpack等，需要安装在本地计算机上才能使用。
云端工具：如codesandbox等，可以在云端使用，无需安装在本地计算机上。

2. ES2017+构建工具的本质

ES2017+构建工具的本质是一个任务管理器。它将构建任务分解成一个个小的步骤，然后按照一定的顺序执行这些步骤，最终完成构建任务。

构建任务可以是任何需要在前端开发过程中执行的操作，如文件压缩、代码合并、代码转换、单元测试等。

构建工具提供了多种内置的任务，如文件压缩、代码合并等。也可以通过插件的方式扩展构建工具的功能，如单元测试、代码覆盖率分析等。

3. 100行代码构建一个现代化构建工具

以下是用100行代码构建一个现代化构建工具的示例：

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

const tasks = {
  clean: function() {
    fs.rmdirSync('dist', { recursive: true });
  },
  copy: function() {
    fs.copyFileSync('src/index.html', 'dist/index.html');
  },
  bundle: function() {
    const webpack = require('webpack');
    const config = require('./webpack.config.js');
    webpack(config, function(err, stats) {
      if (err) {
        console.error(err);
        return;
      }

      console.log(stats.toString());
    });
  },
  test: function() {
    const jest = require('jest');
    jest.runCLI({
      config: path.resolve(__dirname, './jest.config.js'),
    });
  },
};

const argv = process.argv.slice(2);
const task = argv[0];

if (task in tasks) {
  tasks[task]();
} else {
  console.error(`Unknown task: ${task}`);
}