四时宝库

程序员的知识宝库

自制js编译压缩小工具(javascript 压缩)

js的编译和压缩,做了一个小工具,主要就是自己项目成员大都没有这部分的技能,导致发布的时候总需要去编译压缩下.. 最终做了个命令行小工具.. 问题不在这里,前一阵子做压缩的时候发现压缩后竟然是undefined.最终才发现是es6的语法问题。

bug : 通过uglify-js 压缩js文件后文件内容为undefined

在对某个项目内的js文件做压缩的时候,发现了这个问题。结果发现是uglify-js不支持es6的语法和api。

最终只能通过babel来进行编译。

解决: compress 命令行工具

对之前封装的命令行工具compressj2 做了改版。

核心代码

let babel = require('@babel/core');

let baseCode = `let {a} = {a :'name'}`;

babel.transform(baseCode, {

presets: [

['@babel/preset-env', {

"useBuiltIns": "entry",

"modules": false,

"corejs": 2, // 新版本的@babel/polyfill包含了core-js@2和core-js@3版本,所以需要声明版本,否则webpack运行时会报warning,此处暂时使用core-js@2版本(末尾会附上@core-js@3怎么用)

}]

]

}, function(erra, result) {

if (erra) {

console.log('>>:' + filePath);

console.log(erra);

} else {

console.log(result.code);

}

});

babel的版本是7以上,与之前的老版本会有差异。这个一定要注意。

关于babel的使用,参考https://segmentfault.com/a/1190000019718925

命令行的使用

安装

npm install compressjs2 -g

使用

compress //压缩当前目录下所有js并替换

compress -d /home/js //压缩目标目录下js并替换

compress -d /home/js -o /home/build //压缩目标目录下js并输出到/home/build目录下

compress -c //美化压缩后的js文件

compress -l //递归循环调用所有目录,否则只有当前级别

注意

本工具中对js的编译的以上代码,很多`api`并没有增加,主要是对语法进行编译。

对babel的使用很粗浅,不过目前可以满足现有的环境要求。

以后项目再发布做编译压缩的时候.. 只需要一个简单的命令compress 就OK啦。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接