[TOC]
## 使用Babel编译ES6
>1、 下载安装Babel
>环境:需要电脑上安装node(node中一般都会自带npm包管理器)
>`npm install babel-cli -g`
>`npm uninstall babel-cli -g`
之所以在命令行中能直接使用`babel命令`,是因为安装在全局环境下之后,会生成一些xxx.cmd的文件,而这里的xxx就是可以在DOC窗口中执行的命令。
![](https://box.kancloud.cn/7df5a3f176146d468b6d7fed3cd87ab5_697x294.png)
- babel.cmd
- babel-node.cmd 开启repl
- ...
在执行babel命令后我们可以完成一些编译或则其它任务,主要原因是执行babel命令后,会自动加载一些处理任务的文件
打开babel.cmd
![](https://box.kancloud.cn/155cb30c9ed8b98bfd185db5620d6383_696x462.png)
## 配置.babelrc文件,安装一些语言解析包
>我们需要把.babelrc文件配置在当前项目的根目录下
1、 我们需要把.babelrc文件配置在当前想项目的根目录下(这个文件没有文件名,后缀名是babelrc)
注意事项:
- a: 在电脑上不能直接创建没有文件名的文件,我们可以在webstorm中创建,或则使用命令创建
- b:babelrc这个后缀名在某些ws中是不识别的,它其实是一个json文件,我们需要在ws中配置一下(让它隶属于json文件)
![](https://box.kancloud.cn/80deaa52ec5537b2c864550c48382895_1292x596.png)
(新版的webstorm不存在这个问题)
2、 添加配置
```
//.babelrc
{
"presets":[] //=>存放的是我们编译代码时候需要依赖的语言包
,"plugins":[] //=>存放的是,我们编译代码时候需要依赖的插件信息
}
```
>3、 安装依赖的语言解析包
>在当前项目的根目录下安装(不是安装在全局),需要特殊注意的是:要在当前项目根目录中打开DOC命令才可以
>`npm install babel-preset-latest`安装最新已经发布的语言标准解析模块
>`npm install babel-preset-stage-2`安装当前还没有发布但是已经进入草案的语言解析模块(如果你的代码中用到了非正式发布的标准语法,我们需要安装他)
>...
>安装成功之后在当前根目录下会存在一个`node-modules`文件夹,在这个文件夹中有我们安装的模块。
>
>4、 完成最后.babelrc文件的配置
```
{
"presets":[
"lates"
,"stage-2"
] //=>存放的是我们编译代码时候需要依赖的语言包
,"plugins":[] //=>存放的是,我们编译代码时候需要依赖的插件信息
}
```
## 使用命令编译JS代码
```
babel --help / babel -h
```
```
babel --version / babel - V 查看版本号
```
```
babel --out-file / babel -o 把某一个JS文件中的ES6代码进行编译
```
```
babel --out-dir / babel -d 把一个目录下的所有JS文件中的ES6代码都进行编译
```
```
babel --watch / babel -w 监听文件中代码的改变,当代码改变后,会自动进行编译
```
![](https://box.kancloud.cn/83b450376c733bcc342325ba9c41cb49_320x145.png)
- 空白目录
- window
- location
- history
- DOM
- 什么是DOM
- JS盒子模型
- 13个核心属性
- DOM优化
- 回流与重绘
- 未整理
- 文档碎片
- DOM映射机制
- DOM库封装
- 事件
- 功能组件
- table
- 图片延迟加载
- 跑马灯
- 回到顶部
- 选项卡
- 鼠标跟随
- 放大镜
- 搜索
- 多级菜单
- 拖拽
- 瀑布流
- 数据类型的核心操作原理
- 变量提升
- 闭包(scope)
- this
- 练习题
- 各种数据类型下的常用方法
- JSON
- 数组
- object
- oop
- 单例模式
- 高级单例模式
- JS中常用的内置类
- 基于面向对象创建数据值
- 原型和原型链
- 可枚举和不可枚举
- Object.create
- 继承的六种方式
- ES6下一代js标准
- babel
- 箭头函数
- 对象
- es6勉强笔记
- 流程控制
- switch
- Ajax
- eval和()括号表达式
- 异常信息捕获
- 逻辑与和或以及前后自增
- JS中的异步编程思想
- 上云
- 优化技巧
- 跨域与JSONP
- 其它跨域相关问题
- console
- HTML、XHTML、XML
- jQuery
- zepto
- 方法重写和方法重载
- 移动端
- 响应式布局开发基础
- 项目一:创意简历