# [Block scoping](https://babeljs.cn/docs/plugins/transform-es2015-block-scoping)
就是块级作用域，在 ES6 中可以使用 let 创建块级作用域，可以使用 `babel-plugin-transform-es2015-block-scoping` 进行语法转换。
```
npm install --save-dev babel-plugin-transform-es2015-block-scoping
```
## .babelrc 配置
```json
{
"plugins": ["transform-es2015-block-scoping"]
}
```
## 使用
### 循环输出
我们最熟悉的 var 并不存在块级作用域，比如:
```js
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, 1000);
}
```
现象是间隔一秒后，连续输出5次5
而 let 的出现正好解决了这一问题:
in
```js
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, 1000);
}
```
out
```js
"use strict";
var _loop = function _loop(i) {
setTimeout(function () {
console.log(i);
}, 1000);
};
for (var i = 0; i < 5; i++) {
_loop(i);
}
```
实际上，编译出来的代码实际上是一个立即执行函数，可以简写为:
```js
"use strict";
for (var i = 0; i < 5; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 1000);
})(i)
}
```
现象是间隔一秒后，连续输出 0, 1, 2, 3, 4
### 控制流程
var 并不存在块级作用域:
```js
if (true) {
var a = 0
}
console.log(a) // 0
```
let 却存在块级作用域:
in
```js
if (true) {
let b = 1
}
console.log(b) // ERROR: b is not defined
```
out
```js
"use strict";
if (true) {
var _b = 1;
}
console.log(b); // b is not defined
```
可以看到，编译出的代码实际上是使用 `_` 替换了原变量，因此在外部访问不到对应变量，以达到块级作用域的效果。
