1、先全局安装babel-cli,输入命令 npm install babel-cli -g
2、输入 cd d:\es6 ; ---进入文件夹路径
3、输入 npm init; 一路回车键 ---(引导你创建一个package.json文件,包括名称、版本、作者这些信息等)
4、输入 npm install --save-dev babel-cli; ---(安装命令行转码babel-cli工具)
5、es6文件里新建配置文件.babelrc
复制代码
{ "presets": [], "plugins": [] }
粘贴到.babelrc 里
6、命令行窗口输入npm install --save-dev babel-preset-es2015;---(安装es2015依赖项)
将"es2015"加入.babelrc
{ "presets": ["es2015", "react", "stage-0"], "plugins": [] }
7、输入babel -h 检测是否安装成功
8、将es6编译成es5 例如:babel es6.js -o es5.js
9、压缩代码

sudo npm install uglify-js -g : 压缩代码

uglifyjs es5.js -o es5-min.js

组件封装:es6转es5的更多相关文章

  1. es6转es5

    一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...

  2. webpack es6 to es5支持配置

    1. 安装webpack npm install webpack --save-dev 2. 安装babel  实现 ES6 到 ES5 npm install --save-dev babel-co ...

  3. ES6转ES5:Gulp+Babel

    目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...

  4. Vuejs 页面的区域化与组件封装

    组件的好处 当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码.组件是Vue.js最强大的功能之一. 组件可以扩展HTML元 ...

  5. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

  6. ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State

    开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...

  7. es6转es5 在线转换工具

    es6转es5 在线转换工具 Babeljs es6console

  8. vue2.0在android5.0白屏, es6转es5保证浏览器兼容性

    1. 安装 npm install --save-dev babel-preset-es2015 2. 安装 npm install --save-dev babel-preset-stage-3 3 ...

  9. es6转es5在线工具

    es6转es5在线工具:https://babeljs.io/repl/# 程序员常用在线工具:https://tool.lu/

  10. Vue + Element UI 实现权限管理系统 (功能组件封装)

    组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...

随机推荐

  1. Linux学习笔记(5)-hello world

    经过三天的熟悉,我已经将教程中那些常用命令都使用了一遍,所以,从今天起,我已经从一直Linux菜鸟蜕变成了大雕-- Linux的命令无穷多,要想背下来那肯定是不可能的,所以我的目标便是混个手熟,那些常 ...

  2. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  3. node模块函数图解

    已截图方式记录模块信息: HTTP模块: 对于网络返回处理状态封装了很多种,我已截图展现 以上状态也是在http协议中包含的状态. http函数: path模块:

  4. win7 eclipse 调试storm

    windows 下eclipse开发storm 用本地模式,直接run as 运行topology解决了可以什么都不用下,直接把storm-starter的源码下下来,1.在eclipse创建一个ja ...

  5. VR寒冬AR暖春,以色列AR公司再获3000万美元融资

    据统计,2015年国内至少有近70家VR公司获得天使或者A轮投资,不过狂欢并没有持续太久.2016年即将结束,资本寒冬和VR头盔的出货远不如预期,让投资者放慢了步伐,不过AR领域的热度依然不减.近日, ...

  6. 数论 - Pairs(数字对)

    In the secret book of ACM, it’s said: “Glory for those who write short ICPC problems. May they live ...

  7. (转)我看PhD by 王珢

    我看PhD by 王垠 前段时间看了一下这些关于 PhD 的负面信息: 一个专门反对读 PhD 的 BLOG 叫“100 Reasons NOT to Go to Graduate School”(下 ...

  8. Django model字段类型清单

    转载:<Django model字段类型清单> Django 通过 models 实现数据库的创建.修改.删除等操作,本文为模型中一般常用的类型的清单,便于查询和使用: AutoField ...

  9. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  10. CSS3初学篇章_7(布局/浏览器默认样式重置)

    CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象, ...