ES6 实战babel 编译原理 plugins 用途：在解析过程中做一些操作，如正常途径：通过plugins，在

babel 编译原理

plugins 用途：在解析过程中做一些操作，如正常途径：

  let aaa = 1;
  let ~aaa = 2;

  ==>

  var aaa = 1;
  var ~aaa = 2;

通过plugins，在编译过程中做二次处理

  var aaa = 1;
  var ~aaa = 'env_prod';

JS 解析的原理\
1. AST 抽象语法树
```
  a = 2;
```
```
  if (b === 1) {
    a = 2;
    alert(a);
  }
```
解析顺序：从外到内，每一行先找运算符
1. 先找到if，内部运算符为equal ===
2. 左右两侧为 b 与 1
3. if 内部块级作用域为一个 body
4. 找到运算符 assign(=)
5. 运算符左右为 a 与 2
6. alert 同理
7. token 解析时令牌流
```
  let a == 2;
```
babel 在解析时将AST 中的kind="let" 转换成 king="var"
1. 词法解析与语法解析 code --> AST

基础操作

手动babel 使用babel 命令行使用需要全局安装 babel

babel ./src/index.js -o ./dist.index.js

--out-file 或着 -o 可以将结果写入到指定的文件

自动监听 -w -d

babel ./src -w -d ./dist

-w 监听 src目录
把一个目录整个编译成一个新的目录，可以使用 --out-dir 或者 -d

webpack 中配置loader： webpack.base.config.js

  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
  },

babel 统一配置：babelrc 指定浏览器和版本

实战：树选择器

基本架构：tree 本身 + 节点 item OOP item 一个完整的节点 item包括：属性和功能

level 在哪一层？
status: expand/close
可操节点：checked
区分: nid ...

tree 数据流：options + value

options: 树层级结构 - 根节点、根节点下的值（结构、初始态）树结构数据：
- 有利于渲染树形结构
- 很难快速定位到某个节点 --> tree 实例生成 --> item 实例挂载获取 --> map --> tree 生成实例
value: 树渲染出之后，哪个节点会被选中，选中后值如何改变（操作态）

关于销毁：外部如refs实例的对象，不会被框架主动销毁，所以需要手动销毁

面试题：写一个箭头

  .arrow {
    position: absolute;
    width: 5px;
    height: 5px;  
    border-top: 1px solid grey;
    border-left: 1px solid grey;
    transform: rotate(-135deg);
  }