一般我们写js的时候都会模块化并使用es6+的高级特性，如解构，async、await，箭头函数等，这可以大大减轻我们的代码量，但是运行环境却并不是那么理想，这种时候就得上webpack、rollup或者gulp等构建工具了。

那么如果我们并不是在一个独立可打包项目上写代码，如果仅仅只是为老项目加一个页面一个js那该怎么办？也要新建一个配置文件然后加载各种包，然后写各种配置吗？这也太麻烦了一点，我也仅仅是想要打包一个js而已。

那么有没有这么一种工具只要输入命令或者更简单使用快捷键就能打包好一份js代码呢？如一份配置，全局通用，并且在特殊地方可定制化配置等。

这时候我的bundle-cli打包工具集就应运而生了。

目标

可使用js新特性
打包js不需要额外配置
可在任意地方使用
部分配置可定制化

tips: 此工具集基于rollup及各种插件以及库所组合而成，在此只做功能说明，若要看源码可点击文章底部github链接。

功能

安装

全局安装npm包

npm i -g @mxssfd/bundle-cli

也可以用cnpm或yarn等

普通打包

新建一个utils.js以及一个index.js文件，并导入相关函数

然后运行打包命令

bundle-cli index.js

这样，就得到了一个打包后的index.min.js文件了。

从打包后的代码可以看出，代码是已经tree shaking过的，未使用的代码都已经被shaking掉了，而且注释也被保留了。

输出文件名并不是固定的，可通过-o=输出名或-o 输出名命令来设置；如果省略了该参数，那么生成的默认名为入口文件名加min.js后缀

运行打包后的代码

设置umd名 -libraryName / -name

由于使用的是umd打包模式，那么就可以为该库设置一个名字，然后我们使用打包后的库的话，就可以库名.函数这样调用了

把utils.js单独打包出来

bundle-cli utils.js -name=test

新建utils.html引入utils.min.js

在浏览器打开utils.html

压缩 -t / -terse

普通的打包仅仅只是打包，并不会压缩文件，再来看看如何压缩文件，

只要命令行加个 -terser或缩写-t就行

命令

bundle-cli index.js -terser

结果

格式化压缩后的代码

从格式化后的代码可以看出，不仅仅是未使用的代码被shaking掉了，isNumber函数也被rollup给弄成匿名函数了，而且注释也去掉了，倒是o=1这里有点多余，但并这不影响我们的使用

babel -b / -babel

上面简单的打包工具已经好了，那么如果我们写的是es6+的代码，想编译成es5呢

从上面截图可以出普通打包把es6+代码原封不动的打包出来了

接下来我们添加命令-babel来把js编译成es5

bundle-cli index.js -babel

要想去掉注释和压缩可以搭配-t

可以在要打包的文件所在文件夹新建.babelrc配置文件配置babel，默认的babel配置为

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "loose": true
      }
    ]
  ]
}

uglifyjs -u / -uglify

基本功能类似-terser，但比terser强大的多，

bundle-cli index.js -uglify

格式化压缩后的代码后

console直接输出了11，而uglifyjs把下面这一段表达式给直接计算出来了

const a = 10;
let b = 1;
b += a;
console.log(b);

除此之外我还保留了uglifyjs的去除debugger去除console的功能

修改index.js，添加debugger及console

去除console -udc / -uglifyDropConsole

bundle-cli index.js -u -udc

压缩后的图片省略

格式化后

各种log都去除了只留下了debugger和Math.random()

去除debugger -udd / -uglifyDropDebugger

压缩后的图片省略

格式化后

debugger去除掉了

同时去除console和debugger

bundle-cli index.js -u -udc -udd

只留下了Math.random()

当然uglifyjs功能并不只有这么几点，若需要增加功能可以以后再添加

混淆 -e / -eval

各大压缩网站上的压缩混淆效果

bundle-cli index.js -u -udc -udd

打包

格式化后发现变成了这样

当然弄成这样也并不保险，有各种还原工具能把它给还原回去

typescript

新建tsUtils.ts及tsIndex.ts两个文件

运行命令如果入口是ts文件的话会自动编译ts

bundle-cli tsIndex.ts

搭配babel uglify eval

bundle-cli tsIndex.ts -b -u -udd -udc -e

一键打包 - 配合webstorm的外部工具

配置外部工具

配置快捷键

使用快捷键

GIF 2021-7-22 0-31-17

github

欢迎各位大佬拍砖

github.com/mengxinssfd…

免配置js打包编译压缩工具

目标

功能

安装