前言
execution是针对前端打包工具的一个 npm 包，它主要是利用 ES 规范描述任务，将任务作为一个个异步任务链进行执行，依赖于一个数据响应式系统 —— executory。
execution使用简单，但功能强大，本文将详细讲解如何使用 execution 以及它的应用场景，帮助你在前端项目中提高生产力。
安装
在使用execution之前，你需要确保已经安装了 Node.js 环境和 npm 包管理器。
npm install execution --save-dev
快速开始
安装完 execution 后，我们就可以在项目中引入该包了:
const Execution = require("execution");
接下来，让我们编写一个简单的任务以演示 execution 的使用方法：
-- -------------------- ---- ------- ----- ---- - --- ----------- ------ ---------------------- ------ --------- -- --------------------- ------ - - ---- -------- -------- - -------- --------------------- -- -- - ---- --------- -------- - ------- - --------- ----- - -- -- -- --- ----- --------------- -- ----展开代码
以上代码演示了如何使用 execution 对 JS 代码进行转换（使用 Babel），压缩（使用 Uglify），并将结果展示在控制台。
步骤
execution 的最核心部分，是一个由操作步骤组成的链式列表。在这些步骤中，你可以使用一系列的转换器或插件指定任务的每个执行步骤。在这个列表中，每个步骤都从前一个步骤接收数据并返回新的数据。
在 execution 中，使用 use 关键字来声明要使用的插件或转换器。下面是一个简单的示例：
const task = new Execution({ input: "src/images/*.jpg", after: (outputs) => outputs.forEach(log), steps: [ { use: "imagemin", options: { optimizationLevel: 3 } }, { use: "move", options: { dest: "dist/images" } }, ], });
在以上示例中，我们用 imagemin 插件将 *.jpg文件进行压缩，然后将压缩后的文件移动到dist/images目录下。use 成为execution插件和转换器的核心，用它可以串联起整个任务链，实现灵活的任务编排。
插件和转换器
当你想要修改内容的转换器和插件是非常有价值的。execution 中的转换器和插件，就是在步骤中使用 use 关键字定义的。execution 自身并没有包含任何转换器或插件，这个包只是一个执行步骤链的 npm 包。这意味着你需要自己寻找或创建转换器和插件。
使用示例
使用 webpack：
在 webpack 中使用execution时，您可以使用 webpack 原生支持的 loader 和 plugin 来处理文件，就像您通常在 webpack 配置文件中使用它们一样。但是，您可以使用 execution 将这些任务编排成一个完整的、data-driven 的任务链。下面是一个示例：
-- -------------------- ---- ------- ----- ---- - --- ----------- ------ --------------- ------ --------- -- --------------------- ------ - - ---- ---------- -------- - ------- - --------- ----------- -- -- -- -- ---展开代码
在以上示例中，我们使用 webpack 转换 src/index.js 文件。本示例中，我们简单地打包 output 文件到 dist 目录下。
使用 Babel：
execution 也可以使用 Babel 来进行代码转换。在这个例子中，我们将 ES6 代码转换成 ES5 以支持更广泛的浏览器。
-- -------------------- ---- ------- ----- ---- - --- ----------- ------ -------------- ------ --------- -- --------------------- ------ - - ---- -------- -------- - -------- ---------------------- -- -- -- ---展开代码
在以上示例中，我们使用 babel 将所有在“src”目录下以“.js”结尾的文件转换为 ES5 代码，这样就可以在更多浏览器上运行。
总结
execution 是速度很快、功能强大的 npm 包，可以对前端项目进行打包操作。它的最大优势在于使用简单、适合于任何类型的前端项目。在本文中，我们讲解了如何安装和使用 execution ，以及如何编写自己的插件和转换器。
当你需要打包你的前端项目时，execution 可以是一个帮助你提高生产力的有力工具，让你可以使用一种简单、声明式的方式处理诸如打包、转换、压缩等任务。希望这篇文章能够帮助你更好地了解它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75606
