es6语法转es5并压缩混淆代码

es6语法转es5并压缩混淆代码，对兼容和性能做优化

需求分析

1、用es6的语法写了一个工具类
2、需要兼容除chrome外较新的浏览器
3、隐藏源码、缩小网络消耗

利用工具

• babel 用于es6转换es5
• uglifyjs 用于压缩混淆

步骤

1、初始化一个项目

npm init -y

2.安装babel及uglifyjs

 

npm install babel-preset-es2015 babel-cli --save-dev

npm install uglify-js --save-dev

npm install uglify-es --save-dev  //支持es6语法

3.项目根目录下新建文件 babel.config.js， 写入如下配置

module.exports = {
  "presets": [
    "es2015"
  ],
  "plugins": []}

4.在 package.json 写入脚本

"scripts": {
    "build": "babel js/printmap.js -o js/printmap-new.js",
    "uglifyjs": "uglifyjs js/printmap-new.js -m -c -o js/printmap.min.js"
},

build ：利用babel进行语法转换，-o前为输入文件路径，后为输出文件路径
uglifyjs ：进行代码混淆压缩（uglifyjs不支持ES6语法，所以需要先转换）

1. 输出: -o 输出的文件名2. 压缩: -c3. 混淆: -m

5、打开控制台先执行build、后执行uglifyjs，得到如下文件如下