jdists 前端代码块预处理工具

您所在的位置：网站首页 › 前端页面生成工具怎么用 › jdists 前端代码块预处理工具

jdists 前端代码块预处理工具

2023-03-09 00:48| 来源: 网络整理| 查看: 265

什么是 jdists

项目地址：https://github.com/zswang/jdists

关于命名

j dist s 就是 js 里插入了一个 dist （分发），避免和其他组件命名冲突，同时特殊好记。本工具专注于前端代码块（js、css、html）预处理。

起因

一个页面从开发到上线基本会经历三个阶段：

本机开发调试打印一些变量和执行状态、模拟数据接口内网测试跳过某些步骤、使用内网环境公网上线移除调试代码、使用线上环境。

其实前端代码和其他语言代码都需要编译，目前已经有很多成熟的工具来完成编译的事情。比如：fis、grunt、gulp，基本都是依赖配置文件，将项目代码进行编译到相应版本。

问题代码和配置文件是分离的，这样开发维护起来不够直观。配置文件通常是基于 JSON，还是不够直观。调试代码容易遗忘，有导致线上事故的风险。思考

那有没有一种方法能将部分编译逻辑写在代码中，就像 C 语言预编译宏定义，代码本身就包含了编译逻辑不依赖配置文件就能执行：

#include "headfile"#ifdef DEBUGfprintf("variant=%d", variant);#endif

这样不仅利于维护也方便在本机开发时调试，那么接下来需求来了！

需求学习成本要很低。（使用 html 标记，这个大家再熟悉不过）支持 html、css、js 文件格式。本机开发调试时不依赖编译器。（编译逻辑写在注释中）不仅能 include 一个文件，还能 include 一个文件中的片段（代码块）。能引入当前文件的代码块。能够替换代码块的内容。能 include 二进制文件，变为 base64 字符串，方便转成 dataUri。自动合并 css 或 js 文件，能够输出合并文件并能打 md5 戳。能够处理注释模板，避免被压缩工具移除var render = jhtmls.render(function () {/*!#{content}*/});能够扩展替换规则。设计思路

解决好如何定义代码块，其他问题基本就迎刃而解了。

用什么方式来定义代码块？

利用注释 + html 标记，并且又能和普通注释区分。

在 html 中：测试版本在 js 中：/**/console.log('测试版本');/**/在 css 中：.version { font-size: 12px;/**/ color: red;/**/}一些代码未必默认启用，所以支持如下方式在 html 中：在 js 中：/**/在 css 中：.version { font-size: 12px;/**/}废弃的方式测试版本使用 being / end 的方式，主要的问题是容易遗忘，该前缀还是后缀基本概念名称含义例子备注file文件1.js,1.png包括二进制文件block代码块只能是文本文件block::tag标签 block::attribute代码块属性标准代码块tag功能示例include引入文件或代码块replace将当前代码块替换成文件或代码块 remove将当前代码移除代码属性（attribute）属性名含义例子备注encoding编码encoding="base64"默认"original"，可扩展file文件名file="all.js"默认当前文件type类型type="comment"默认"original"，"comment"：去掉包裹代码块的注释trigger触发器trigger="release,LAN"默认"release"，存在这些触发器时才生效jsjs 文件js="dist/all.js?"输出的 js 文件名csscss 文件css="dist/all.css?"输出的 css 文件名编码（encoding）original：原文string：作为字符串base64：base64 输出md5：内容 MD5 戳（小写）concat：合并本地 js 或 css 并可以知道输出

可以通过 jdists.setEncoding(encoding, processor) 扩展

使用限制代码块不能交叉，可以嵌套代码块引用不能出现循环实战开始使用

依赖 npm 环境

安装 $npm install jdists -g

命令格式 $jdists input1 [input2] [-output output] [-remove debug,test]

命令参数

参数简写功能备注-output-o指定输出文件默认输出到控制台-remove-r指定移除的代码块默认 "debug,test"-trigger-t指定触发器默认 "release"-version-v打印当前版本处理 js 中的注释模板

假设文件 js/base.js 内容为：

var render = jhtmls.render(function() {/*!forEach(function(item) { #{item.title}});*/});

如上可以省去拼接字符串的工作，直观好维护。但经过带压缩后就变成：

var render=jhtmls.render(function(){});

怎么避免注释模板被替换？

$jdists js/base.js -o dist/js/base.js

生成的文件是：

var render = jhtmls.render('\nforEach(function(item) {\n #{item.title}\n});\n');

jdists 默认会处理注释模板

发布代码

假设文件 js/net.js 内容为：

var ajax = ajax || {};void function(exports) {/**/}(ajax);

$jdists js/net.js -o dist/js/net.js

生成的文件是：

var ajax = ajax || {};void function(exports) { exports.host = 'http://api.baidu.com/1.0/getuser';}(ajax);

还有一种情况，是我们需要先编译一个局域网版本

假设文件 js/net.js 内容为：

var ajax = ajax || {};void function(exports) {/**//**/}(ajax);

$jdists js/net.js -o dist/js/net.js -t LAN

生成的文件是：

var ajax = ajax || {};void function(exports) {/**/ exports.host = 'http://192.168.1.67:8000/1.0/getuser';}(ajax);

指定 trigger 的代码块，会检查是否命中配置的触发器，如果没有命中则不启用功能。

合并静态资源

还是依所见即所得的设计思路，开发期的 html 指明了依赖的静态文件，如：

index.html

...

$jdists index.html -o dist/index.html

生成的文件是：

...

同时将本地静态资源分别合并到 dist/all.js 和 dist/all.css

打包组件

通过 jdists 可以将零散的代码和静态资源，拼凑为一个完整的组件

void function() { var bar = document.getElementById('jfpss-bar'); if (bar) { return; } /**/ ; /**/ ; /**/ createStyle(function() {/*!*/}); var div = document.createElement('div'); div.innerHTML = function() {/*!*/}; document.body.appendChild(div); /**/}();

这样就可以用静态页面开发 UI 组件了。

参考实例：https://github.com/zswang/jfpss/blob/master/src/tools.jdists

后续加入自动内联代码。提供 fis、grunt、gulp 插件。

项目地址：https://github.com/zswang/jdists

【本文地址】

jdists 前端代码块预处理工具

jdists 前端代码块预处理工具

今日新闻

推荐新闻