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. curl运行json串,代理转发格式

    curl -b 'uin=o0450654733; skey=@tq9xjRvYy' -H "Content-Type: application/json" -X POST -d ...

  2. 用Less CSS定义常用的CSS3效果函数

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  3. Maven 的插件和生命周期的绑定

    一.Maven 的生命周期 Maven 的生命周期是对所有的构建过程进行抽象和统一.Maven 的生命周期是抽象的,这意味着生命周期本身不做任何实际的工作,生命周期只是定义了一系列的阶段,并确定这些阶 ...

  4. to_string()的应用

    作用是将数字转化为字符串 #include<iostream> #include<cmath> #include<algorithm> #include<cs ...

  5. Leetcode Valid Number

    Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...

  6. bzoj 2753: [SCOI2012] 滑雪与时间胶囊 Label:MST

    题目描述 a180285非常喜欢滑雪.他来到一座雪山,这里分布着M条供滑行的轨道和N个轨道之间的交点(同时也是景点),而且每个景点都有一编号i(1<=i<=N)和一高度Hi.a180285 ...

  7. NSMutableAttributedString常用代码

    NSTextAttachment *attachment = [[NSTextAttachment alloc] init]; attachment.image = [UIImage imageNam ...

  8. MongoDB使用小结:一些不常见的经验分享

    最近一年忙碌于数据处理相关的工作,跟MongoDB打交道极多,以下为实践过程中的Q&A,后续会不定期更新补充. 另有<MongoDB使用小结:一些常用操作分享>,注:本文完成时Mo ...

  9. Andriod如何更改应用程序小图标

    1.之前我们安装的第一个应用图标是这样的(如下图) 2.在eclipse左侧项目中找到res文件下的drawable-hdpi         3.把自己找的LOGO图标拖到文件中,之后会弹出一个消息 ...

  10. 百度网盘生成二维码api

    分享出自精神,灵感来自大脑,在百度云网盘分享每一个文件,都会在页面生成一个二维码扫描的图片: 我就进一步看了该图片的地址: 发现没有,圈圈内是不是有点眼熟,就跟其他二维码api接口一样,只要盗用这段东 ...