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，得到如下文件如下

es6语法转es5并压缩混淆代码相关推荐

将ES6的语法转为ES5（为了兼容 ES5） (Babel)
掌握 ES6 之后,如果你的业务需要考虑 ES5 的兼容性,则可以这样做:写 ES6 语法的 js 代码,然后通过 Babel将 ES6 转换为 ES5.如果没有这样的需要,那么下面的内容,了解即可. ...
webpack之配置es6转换成es5
webpack之配置es6转换成es5 为什么要将代码中的es6语法转换成es5语法呢?这是因为有些浏览器无法识别es6语法.而webpack在不借助babel的情况下,只能对js进行打包处理,无法将 ...
华为手机自带浏览器不支持 ES6 语法
原文地址:https://caochangkui.github.io/huawei-es6/ 华为手机自带浏览器对 es6 语法的支持度极差,哪怕最新的荣耀10 手机也有该毛病!所以,移动端项目开发中 ...
Java 压缩/混淆 JavaScript 代码
基本上都是自己写的工具构建前端工程,压缩/混淆 JavaScript 代码的工具必不可少.我们是 Java 平台的,就是说用 Java 去压缩 JS,这样比较方便.虽然咱们可以外部调用 node 等专 ...
使用UglifyJS实现将js代码压缩混淆
使用UglifyJS进行js代码压缩混淆(混淆后的代码的可读性是较高的,这里主要是压缩体积) 安装:全局:npm install uglify-js -g 局部:npm install uglify- ...
React使用ES6语法重构组件代码
首次使用react,要注意react不同版本库,是ES5还是ES6的写法,如何做到统一.下面对于ES6语法重构组件的代码如下: (1)原始代码: <script type="text/ ...
join为什么每个字符都分割了 js_为什么 webpack4 默认支持 ES6 语法的压缩？
在专栏课程里,有位同学提到过一个很有意思的问题:"我没装 babel,js 入口里写了个箭头函数,运行 webpack 构建命令后,也成功编译了.这是为什么?".今天就带领大家一起 ...
如何利用babel工具将es6语法转换成es5语法
如何利用babel工具将es6语法转换成es5语法一.很多同学疑问既然es6已经出来的了,为很莫写完es6语法还要把他转换成es5,这不是脱裤子放屁吗? ECMAScript 6(ES6)的发展速度 ...
html 混淆压缩,前端代码的精简、混淆、压缩和编译
几个基本概念在网站部署前,我们往往要对前端的代码进行发布,我这里说的"发布",指的就是精简.混淆.压缩.编译等. 1.精简: 目的是减少代码体积,减小网络传输时间,提高页面响应. ...

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

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

需求分析

利用工具

步骤

es6语法转es5并压缩混淆代码相关推荐

最新文章

热门文章