@@ -347,19 +347,19 @@ export default foo;
347
347
下面比较一下默认输出和正常输出。
348
348
349
349
``` javascript
350
- // 输出
351
- export default function crc32 () {
350
+ // 第一组
351
+ export default function crc32 () { // 输出
352
352
// ...
353
353
}
354
- // 输入
355
- import crc32 from ' crc32' ;
356
354
357
- // 输出
358
- export function crc32 () {
355
+ import crc32 from ' crc32' ; // 输入
356
+
357
+ // 第二组
358
+ export function crc32 () { // 输出
359
359
// ...
360
360
};
361
- // 输入
362
- import {crc32 } from ' crc32' ;
361
+
362
+ import {crc32 } from ' crc32' ; // 输入
363
363
```
364
364
365
365
上面代码的两组写法,第一组是使用` export default ` 时,对应的` import ` 语句不需要使用大括号;第二组是不使用` export default ` 时,对应的` import ` 语句需要使用大括号。
@@ -399,18 +399,32 @@ export default var a = 1;
399
399
400
400
上面代码中,` export default a ` 的含义是将变量` a ` 的值赋给变量` default ` 。所以,最后一种写法会报错。
401
401
402
- 有了` export default ` 命令,输入模块时就非常直观了,以输入jQuery模块为例。
402
+ 有了` export default ` 命令,输入模块时就非常直观了,以输入 lodash 模块为例。
403
+
404
+ ``` javascript
405
+ import _ from ' lodash' ;
406
+ ```
407
+
408
+ 如果想在一条` import ` 语句中,同时输入默认方法和其他变量,可以写成下面这样。
403
409
404
410
``` javascript
405
- import $ from ' jquery ' ;
411
+ import _ , { each } from ' lodash ' ;
406
412
```
407
413
408
- 如果想在一条import语句中,同时输入默认方法和其他变量,可以写成下面这样 。
414
+ 对应上面代码的 ` export ` 语句如下 。
409
415
410
416
``` javascript
411
- import customName , { otherMethod } from ' ./export-default' ;
417
+ export default function (obj ) {
418
+ // ···
419
+ }
420
+ export function each (obj , iterator , context ) {
421
+ // ···
422
+ }
423
+ export { each as forEach };
412
424
```
413
425
426
+ 上面代码的最后一行的意思是,暴露出` forEach ` 接口,默认指向` each ` 接口,即` forEach ` 和` each ` 指向同一个方法。
427
+
414
428
如果要输出默认的值,只需将值跟在` export default ` 之后即可。
415
429
416
430
``` javascript
@@ -432,6 +446,34 @@ let o = new MyClass();
432
446
433
447
如果在一个模块之中,先输入后输出同一个模块,` import ` 语句可以与` export ` 语句写在一起。
434
448
449
+ ``` javascript
450
+ export { foo , bar } from ' my_module' ;
451
+
452
+ // 等同于
453
+ import { foo , bar } from ' my_module' ;
454
+ export { foo , boo };
455
+ ```
456
+
457
+ 上面代码中,` export ` 和` import ` 语句可以结合在一起,写成一行。
458
+
459
+ 模块的改名输出和整体输出,也可以采用这种写法。
460
+
461
+ ``` javascript
462
+ // 改名输出
463
+ export { foo as myFoo } from ' my_module' ;
464
+
465
+ // 整体输出
466
+ export * from ' my_module' ;
467
+ ```
468
+
469
+ 默认输出的写法如下。
470
+
471
+ ``` javascript
472
+ export { default } from ' foo' ;
473
+ ```
474
+
475
+ 将某个接口改为默认输出的写法如下。
476
+
435
477
``` javascript
436
478
export { es6 as default } from ' ./someModule' ;
437
479
@@ -440,7 +482,11 @@ import { es6 } from './someModule';
440
482
export default es6 ;
441
483
```
442
484
443
- 上面代码中,` export ` 和` import ` 语句可以结合在一起,写成一行。但是从可读性考虑,不建议采用这种写法,而应该采用标准写法。
485
+ 同样地,默认输出也可以改名为具名接口。
486
+
487
+ ``` javascript
488
+ export { default as es6 } from ' ./someModule' ;
489
+ ```
444
490
445
491
另外,ES7有一个[ 提案] ( https://github.com/leebyron/ecmascript-more-export-from ) ,简化先输入后输出的写法,拿掉输出时的大括号。
446
492
@@ -1064,15 +1110,15 @@ import(`./section-modules/${someVariable}.js`)
1064
1110
1065
1111
### ES6 module transpiler
1066
1112
1067
- [ ES6 module transpiler] ( https://github.com/esnext/es6-module-transpiler ) 是square公司开源的一个转码器,可以将ES6模块转为CommonJS模块或AMD模块的写法 ,从而在浏览器中使用。
1113
+ [ ES6 module transpiler] ( https://github.com/esnext/es6-module-transpiler ) 是 square 公司开源的一个转码器,可以将 ES6 模块转为 CommonJS 模块或 AMD 模块的写法 ,从而在浏览器中使用。
1068
1114
1069
1115
首先,安装这个转玛器。
1070
1116
1071
1117
``` bash
1072
1118
$ npm install -g es6-module-transpiler
1073
1119
```
1074
1120
1075
- 然后,使用` compile-modules convert ` 命令,将ES6模块文件转码 。
1121
+ 然后,使用` compile-modules convert ` 命令,将 ES6 模块文件转码 。
1076
1122
1077
1123
``` bash
1078
1124
$ compile-modules convert file1.js file2.js
@@ -1086,9 +1132,9 @@ $ compile-modules convert -o out.js file1.js
1086
1132
1087
1133
### SystemJS
1088
1134
1089
- 另一种解决方法是使用[ SystemJS] ( https://github.com/systemjs/systemjs ) 。它是一个垫片库(polyfill),可以在浏览器内加载ES6模块、AMD模块和CommonJS模块,将其转为ES5格式。它在后台调用的是Google的Traceur转码器 。
1135
+ 另一种解决方法是使用 [ SystemJS] ( https://github.com/systemjs/systemjs ) 。它是一个垫片库(polyfill),可以在浏览器内加载 ES6 模块、AMD 模块和 CommonJS 模块,将其转为 ES5 格式。它在后台调用的是 Google 的 Traceur 转码器 。
1090
1136
1091
- 使用时,先在网页内载入system.js文件 。
1137
+ 使用时,先在网页内载入 ` system.js ` 文件 。
1092
1138
1093
1139
``` html
1094
1140
<script src =" system.js" ></script >
@@ -1104,7 +1150,7 @@ $ compile-modules convert -o out.js file1.js
1104
1150
1105
1151
上面代码中的` ./app ` ,指的是当前目录下的app.js文件。它可以是ES6模块文件,` System.import ` 会自动将其转码。
1106
1152
1107
- 需要注意的是,` System.import ` 使用异步加载,返回一个Promise对象 ,可以针对这个对象编程。下面是一个模块文件。
1153
+ 需要注意的是,` System.import ` 使用异步加载,返回一个 Promise 对象 ,可以针对这个对象编程。下面是一个模块文件。
1108
1154
1109
1155
``` javascript
1110
1156
// app/es6-file.js:
0 commit comments