介绍
在前端开发中，我们经常需要使用多个预处理器来处理 CSS、JS 或者 HTML 文件。而每个预处理器都有其特定的语法和规则，这使得前端代码的维护工作变的十分费力。
为了解决这个问题，Jeefo 团队开发了 jeefo_preprocessor 这个 npm 包。该包可以将多种前端预处理器语言编译成普通的 CSS、JS 或者 HTML 文件。而且，该包支持自定义的预处理器配置，使得我们可以轻松利用其处理我们特定的项目需求。
本文将详细介绍如何使用 jeefo_preprocessor，希望对前端开发人员有所帮助。
开始使用
- 安装 jeefo_preprocessor
使用 npm 安装 jeefo_preprocessor:
npm install --save-dev jeefo_preprocessor
- 创建 jeefo_preprocessor 配置文件
在项目根目录下创建 jeefo_preprocessor.config.js 文件：
-- -------------------- ---- ------- -------------- - - ------------ - -------- ----------------------- ---------------------------- ----------- --------- -------- -------- -------- ------- ---------------- -- -------- - -------- ------------------- ------------------------ ----------- ------- ------ ------- -------- ------- ---------------- -- ---------- - -------- --------------------- -------------------------- ----------- --------- ------- ------- --------- ------- ---------------- - --展开代码
上面的配置文件有三个配置项：
stylesheets存放 CSS 相关预处理器编译配置。scripts存放 JS 相关预处理器编译配置。templates存放 HTML 相关预处理器编译配置。
在每个配置项中，sources 用于设置要编译的源文件路径，extensions 用于设置要处理的文件扩展名，而 output 则用于设置最终编译后的文件输出路径。
- 编写预处理器文件
我们以 Less 文件为例：
@color: #00FF00; body { background-color: @color; }
- 编译预处理器文件
在终端输入以下命令：
npx jeefo_preprocessor -t stylesheets
该命令将编译配置文件中 stylesheets 部分所指定的所有 Less 文件，并将编译后的文件输出到 path/to/output 文件夹下。
如果想编译其他类型文件，只需要将命令中 -t 后的内容改为 templates 或者 scripts 即可。
更多用法
除了以上最简单的使用方法，jeefo_preprocessor 还支持更多的自定义配置，例如：处理后的文件命名、修改编译器选项、添加额外的插件等。
可以在 jeefo_preprocessor 的官方文档中获取更多使用详情。
示例代码
以下代码演示了 jeefo_preprocessor 的使用：
-- -------------------- ---- ------- -- -- -- ------------------ --- ------- ---------- ------------------ -- -- -- ------------------ ---- -------------- - - ------------ - -------- --------------- ----------- ---------- ------- ------------------ - -- -- -- -------- -- --------------------- ------- -------- ---- - ----------------- ------- - -- -- -------- --- ------------------ -- -----------展开代码
上述代码将会编译 src/styles 文件夹下的所有 Less 文件，将编译后的文件输出到 dist/stylesheets 文件夹下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66144
