前端开发中，我们常常需要将源码进行压缩、混淆，以达到优化代码、提高加载速度的目的。然而，这样的代码并不利于阅读和调试。在这种情况下，一个好用的工具就显得尤为重要。metalsmith-beautify 就是一个非常实用的 npm 包，它可以将压缩、混淆后的代码重新格式化，使其变得易于阅读和调试。本文将为大家详细介绍 metalsmith-beautify 的使用方法及其特色功能。
环境准备
在使用 metalsmith-beautify 前，需要先安装 Node.js 环境，并确保 npm 包管理器已正确安装。在此基础上，我们可以通过以下命令安装 metalsmith-beautify：
npm install metalsmith-beautify --save
使用示范
我们通过以下示例代码，来演示 metalsmith-beautify 的使用过程。请先将代码仓库中的“sample”文件夹下载到本地。
初始化项目
首先需要创建一个空的项目，并初始化 metalsmith 生成器，使用以下代码：
mkdir beautify-demo cd beautify-demo npm init -y npm install --save-dev metalsmith mkdir src touch src/index.js
安装 metalsmith-beautify
然后安装 metalsmith-beautify：
npm install --save-dev metalsmith-beautify
添加 metalsmith 插件
在项目根目录中创建 metalsmith.js 文件，并添加如下代码：
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- -------- - ------------------------------- -- -- ---------- -- ----- -- - ---------------------- -- ---- ----- --------------- - - ---- ------ ----- - ------------ -- ------------ - -- ---------------- ------- ------------------ ----- ------------ -------- ------ -- --- - ------------ -- ------------ - -- ------------------ ----- ------------ -------------------------- - -- -- -- ---------- -- ---------------------------------- -- -- ---------- ----------------- ----- - -- ----- ----- ---- ------------------ ------------ ---展开代码
运行项目
运行以下命令，执行 metalsmith 生成器，将压缩的代码重新格式化：
node metalsmith.js
结果查看
此时，我们可以在 ./build 文件夹中查看源代码经过格式化后的效果，格式更加易于阅读和调试。
metalsmith-beautify 的配置项
metalsmith-beautify 支持以下配置项：
css
Boolean。开启/关闭 CSS 格式化，默认关闭。
html
Object。HTML 格式化配置项。
- indent_size：Number。缩进大小，默认 4。
- indent_char：String。缩进字符，默认一个空格。
- wrap_attributes：String。属性的换行方式，可选的值为 auto、force、force-aligned、force-expand-multiline、aligned-multiple、preserve。默认 auto。
- preserve_newlines：Boolean。保留换行符，默认 true。
- unformatted：Array。不格式化的标签数组，默认 ['code', 'pre']。
js
Object。JS 格式化配置项。
- indent_size：Number。缩进大小，默认 4。
- indent_char：String。缩进字符，默认一个空格。
- preserve_newlines：Boolean。保留换行符，默认 true。
- brace_style：String。代码块样式，可选的值为 collapse、expand、end-expand、none、preserve-inline、collapse-preserve-inline。默认 collapse,preserve-inline。
总结
metalsmith-beautify 是一个非常好用的 npm 包，可以将压缩、混淆后的代码重新格式化，使其易于阅读和调试，为前端开发带来许多方便。本文详细介绍了 metalsmith-beautify 的使用方法及其配置项，相信读者已经可以轻松使用该工具了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68821
