minify

安装

 sh
npm install babel-preset-minify --save-dev

用法

Via .babelrc 配置文件(推荐)

.babelrc

 json
{
  "presets": ["minify"]
}

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

或通过参数设置 –

 json
{
  "presets": [["minify", {
    "mangle": {
      "exclude": ["MyCustomError"]
    },
    "unsafe": {
      "typeConstructors": false
    },
    "keepFnName": true
  }]]
}

通过命令行工具(CLI)

 sh
babel script.js --presets minify

通过 Node API

 javascript
require("@babel/core").transform("code", {
  presets: ["minify"]
});

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

参数

有两种类型的参数:

  1. 通过插件一比一地映射
  2. 相同的参数传递给多个插件
通过插件一比一地映射
  • false – 关闭插件
  • true – 开启插件
  • { ...pluginOpts } – 开启插件并将 pluginOpts 传递给插件
参数名 插件 默认值
booleans transform-minify-booleans true
builtIns minify-builtins true
consecutiveAdds transform-inline-consecutive-adds true
deadcode minify-dead-code-elimination true
evaluate minify-constant-folding true
flipComparisons minify-flip-comparisons true
guards minify-guarded-expressions true
infinity minify-infinity true
mangle minify-mangle-names true
memberExpressions transform-member-expression-literals true
mergeVars transform-merge-sibling-variables true
numericLiterals minify-numeric-literals true
propertyLiterals transform-property-literals true
regexpConstructors transform-regexp-constructors true
removeConsole transform-remove-console false
removeDebugger transform-remove-debugger false
removeUndefined transform-remove-undefined true
replace minify-replace true
simplify minify-simplify true
simplifyComparisons transform-simplify-comparison-operators true
typeConstructors minify-type-constructors true
undefinedToVoid transform-undefined-to-void true
相同的参数传递给多个插件
  • 当多个插件需要相同的参数时,在一个地方声明更容易控制。然后将这些参数传递给两个或多个插件。
参数名 插件
keepFnName Passed to mangle & deadcode
keepClassName Passed to mangle & deadcode
tdz Passed to builtIns, evaluate, deadcode, removeUndefined

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

示例

 json
{
  "presets": [["minify", {
    "evaluate": false,
    "mangle": true
  }]]
}
 json
{
  "presets": [["minify", {
    "mangle": {
      "exclude": ["ParserError", "NetworkError"]
    }
  }]]
}
 json
{
  "presets": [["minify", {
    "keepFnName": true
  }]]
}
// is the same as
{
  "presets": [["minify", {
    "mangle": {
      "keepFnName": true
    },
    "deadcode": {
      "keepFnName": true
    }
  }]]
}

← reacttypescript →

来源:Js中文网 – 前端进阶资源教程
链接:https://www.javascriptc.com/docs/babel-manual/babel-preset-minify

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界