09月06, 2016

js美化及压缩相关

这篇文章不是讲从工具级的,通过构建工具(gulp)等来进行压缩或者美化。而是从代码的角度来说,怎么来实现?比如说有两个textarea框,上面输入代码(或者把代码粘贴进去),点击“压缩”或者“美化”来将上面的代码压缩或者美化生成新的代码到下面的框里面。

当然,我们打开百度,输入在线压缩JS,会出现很多在线的工具。我简单看了一下,大概有这样几种实现:

  • 发请求到后端,由后端处理返回
  • 通过YUI Compressor
  • 通过base2的packer

第三个的具体源文件名称:

  • base.js(用来处理压缩)
  • jsformat.js(用来处理美化)

那么我说一下我在工作中碰到的需求,其实是一个同事碰到的。我们在做一个工具,那个工具要生成一个json文件,然后有些key对应的value比较复杂,是一段js代码,在写出去的时候,需要压缩成一行,然后工具写回来的时候要将它美化掉。

当然这个事,可以在生成json文件以及渲染json文件的时候,通过node来实现。

最简单的实现,是通过上面的两个js文件处理一下就好了。

不过现在是ES6的时代,不装一下明显对不起自己,同时也显得不够“高大上”。

js美化

js美化相对来说,要简单许多,在npm众多库中,有一个“js-beautify”的库,还是挺好用的。

var beautify_js = require("js-beautify").js_beautify,
    beautify_html = require("js-beautify").html,
    beautify_css = require("js-beautify").css;

console.log(beautify_js("var a = 1; console.log(a + 1);", { indent_size: 2 }));

console.log(beautify_css(".test{color: red;}.test2{overflow: hidden;}", { indent_size: 2 }));

console.log(beautify_html("<div><ul><li>1</li><li>2</li><li>3</li></ul></div>", { indent_size: 2 }));

如果我们用的是webstorm,那直接run code,就可以得到下面的结果:

js美化

等等,我们要的不是node端,而是浏览器端啊。。

构建工具的处理

之前我一直比较推荐FIS,它的处理方式是要加一个hook

但我个人用下来,似乎有点问题,我的代码在另外一个朋友那里可以正常跑,但我的就不行,猜想是和环境有关吧,反正提了issue给他们,希望会有人回答。

所以我这次推荐webpack,相比之下,fis对npm包的引用要弱于webpack(在我上面一个问题未解决前)。

使用方式:

  • 全局安装webpack和webpack-dev-server(npm install -g webpack webpack-dev-server
  • 新建src和build目录
  • 在src目录下,新建index.js文件,把上面的美化代码拷贝过去
  • 在build目录下,新建一个html文件,先内容为空
  • 在根目录下新建webpack.config.js

webpack.config.js具体内容:

var path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "src/index.js"),
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
};

上面的含义是将src的index.js打包生成到build文件夹下的bundle.js,所以在build目录下的index.html只要引用bundle.js就好了

随后,我们使用命令:

webpack-dev-server --progress --colors --content-base build

打开浏览器,输入http://127.0.0.1:8080,就可以看到控制台有输出了。

对于webpack,我目前的了解并不深入,以后会单独写一篇文章的。

js压缩

一开始想到的是uglify.js,并且尝试了一下,代码如下:

var UglifyJS = require("uglify-js");

console.log(UglifyJS);

报错信息:

error信息

由上图可以猜到,源码中用了fs,导致了浏览器端无法使用。

随后,我github上搜索了一把,让我找到一个Browser-UglifyJS

跑了一下demo,是可以的。。但是它会做变量混淆,而我的本意是不做代码混淆,因为希望能被重新还原回去的。

简单看了一下option的配置,发现并没有一个参数是支持变量不混淆的,但是用命令行是可以做到的,这一点让我很无奈。

不过在查找相关的文章时,发现一个uglify源码的系列文章,写的挺好的。

其他

上面分析下来,除了压缩那一块确实很蛋疼。真要用的话,或者考虑base2,或者用YUI Compressor。

最近项目压得紧,9月份应该会更忙,所以近段时间产出会比较少。

本文链接:www.my-fe.pub/post/js-uglify-and-beautify.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。