js模块化-js#Android#iOS#39;

那么如果我们不是在独立的可打包项目上编写代码，而是只是在旧项目中添加一个页面和js呢？ 我们是否还需要新建一个配置文件，加载各种包，然后写入各种配置呢？ 这个太麻烦了，我只想封装一个js。

那么有没有这样一个工具，只需要输入命令或者简单的使用快捷键就可以打包一段js代码呢？ 例如，一种配置是通用的，并且可以在特殊的地方进行定制。

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

目标可以利用js的新特性来封装js。 无需额外配置，可以在任何地方使用。 一些配置可以定制。

提示：该工具集基于各种插件和库的组合。 我这里只描述一下功能。 如果您想查看源代码，请点击文章底部的链接。

功能安装

全局安装 npm 包

npm i -g @mxssfd/bundle-cli

还可以使用cnpm或yarn等。

普通包装

新建utils.js和index.js文件并导入相关函数

然后运行打包命令

bundle-cli index.js

这样，你就会得到一个打包好的index.min.js文件。

从打包后的代码可以看出，代码已经树化，去掉了未使用的代码，保留了注释。

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

运行打包的代码

设置 umd 名称-/-名称

由于我们使用的是umd打包模式，所以我们可以为库设置一个名称，然后如果我们使用打包后的库，就可以使用库名称。 该函数是这样调用的

单独打包utils.js

bundle-cli utils.js -name=test

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

在浏览器中打开utils.html

压缩-t/-简洁

普通打包只打包，不压缩文件。 我们来看看如何压缩文件。

只需在命令行中添加 - 或缩写 -t

命令

bundle-cli index.js -terser

结果

格式化压缩代码

从格式化的代码中可以看出，不仅去掉了未使用的代码，而且函数也都做成了匿名函数，并且注释也被去掉了。 不过o=1有点多余，不过不影响。 我们的用途

巴别塔 -b / -巴别塔

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

从上面的截图可以看到，普通的打包将es6+代码完好无损的封装了。

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

bundle-cli index.js -babel

要删除注释和压缩，请使用 -t

您可以在待打包文件所在文件夹中新建一个配置文件，对babel进行配置。 默认的 babel 配置是

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

-u/-

基本功能与-类似，但功能更强大，

bundle-cli index.js -uglify

格式化压缩代码后

直接输出11，直接计算下面的表达式。

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

另外我还保留了删除的功能

修改index.js，添加和

删除-udc/-

bundle-cli index.js -u -udc

压缩图片省略

格式化后

各种日志都被去掉了，只留下Math.()

删除-udd/-

压缩图片省略

格式化后

已删除

删除和

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

只剩下Math.()了

当然，功能不仅仅只有这些。 如果您需要添加更多功能，可以稍后添加。

令人困惑的 -e/-eval

压缩混淆对主要压缩网站的影响

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

盒

格式化后发现变成了这样

当然，这样做并不安全。 有多种恢复工具可以将其恢复。

创建两个新文件，.ts 和 .ts

如果运行命令时入口点是ts文件，ts会自动编译。

bundle-cli tsIndex.ts

与 babel eval 配对

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

一键打包-兼容外部工具

配置外部工具

配置快捷键

使用快捷键

欢迎各位老板来搭砖

/…