/bundle-cli

0配置打包/压缩js cli工具

Primary LanguageJavaScriptMIT LicenseMIT

bundle-cli

主要实现了在非构建环境下,无需配置,只通过命令对 js 或 ts 文件进行打包、babel 转译、压缩、混淆等功能

使用 rollup 打包压缩 js,如果入口是 typescript 文件,那么会自动开启 ts 打包。

命令

-input/-i                      文件入口
-output/-o                     输出文件
-module/-m                     模块类型(默认umd)
-help/-h                       帮助
-terser/-t                     普通压缩
-babel/-b                      开启babel(es6+转es5)
-libraryName/-name             打包后的名字,默认是文件名(umd模式)
-uglify/-u                     开启uglifyjs(丑化js)
-uglifyDropDebugger/-udd       移除debugger,需开启uglify
-uglifyDropConsole/-udc        移除console,需开启uglify
-eval/-e                       eval parker混淆模式

安装

npm i -g @mxssfd/bundle-cli

使用

bundle-cli inputPath outputPath

如果输出文件名不填,则为输入文件名.min.js 或

bundle-cli -input path -output path

普通压缩(不是很推荐,推荐 babel+uglify)

bundle-cli inputPath outputPath -terser

babel(es6 及以上转 es5,部分特性需要自己加上 polyfill)

bundle-cli inputPath outputPath -babel

注意!!!!! es7 的 async await 转成 es5 需要一个 polyfill,否则会报错

在前面加上regenerator-runtimepolyfill 库即可

<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.9/runtime.min.js"></script>

uglify(丑化 js 代码)

bundle-cli inputPath outputPath -uglify

去除 debugger

bundle-cli inputPath outputPath -udd

去除 console

bundle-cli inputPath outputPath -udd

eval

eval 混淆

bundle-cli inputPath outputPath -eval

模块类型

默认使用的是umd模块打包,可以选择es,amd,commonjs等模块类型打包。

umd模式下会生成libraryName暴露出模块名,如vue会在window下暴露出Vue这个库名,然后可以使用类似Vue.createApp等方法

如果umd模式下原文件未export暴露出函数,那么不会生成libraryName

注意!!!!! 部分库会和umd冲突,如monaco-editor,此时使用es打包即可,不过es打包会污染window, 不影响的情况下还是推荐umd

通过编辑器快捷键使用命令一键打包

webstorm

设置>外部工具>添加外部工具 并依次填入

名称:bundle-cli(随意)
程序:必须从npm全局安装目录下查找到bundle-cli.cmd
实参:$FilePath$ -b -u -udc -udd -e
工作目录:$FileDir$

$FilePath$webstorm当前打开的文件或目录下鼠标选中的文件
$FileDir$webstorm当前打开的文件所在目录,供babel使用

然后打开要打包的文件,右键选择外部工具|external tools找到bundle-cli鼠标点击就能打包了

添加快捷键:打开设置>键盘映射找到外部工具>external tools>bundle-cli,添加快捷键,然后就可以通过设置的快捷键一键打包

vscode

快捷键ctrl + shift + b打开任务弹窗,新建一个任务并填写以下

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "shell",
      "group": "build",
      "problemMatcher": [],
      "label": "bundle-cli",
      "command": "bundle-cli ${file} -b -u -udc -udd -e"
    }
  ]
}

${file}vscode当前打开的文件

打开要打包的文件,然后再次使用ctrl + shift + b打开任务窗口,并选中刚才设置的任务并选中bundle-cli,那么就命令就完成了。

使用编辑器快捷键免除了每次都要输入繁琐的命令

更多配置可参考 vscode 官方配置