1️⃣ module 模块化

如果文件使用了模块化语法在 html 引入时就要为 script 标签声明一下引入的 js 为模块化语法在 script 标签上

  1.   1. 声明 type 为 module `**<script src="./index.js" type="module"></script>**`
  2.   2. 否则会报错 `**Uncaught SyntaxError: Cannot use import statement outside a module**`

1️⃣ 基本导入导出

2️⃣ 基本导出

基本导出可以导出多个，每个必须有名称
基本导出的语法如下：

  1. // 方法一：export 声明表达式
  2. export let num = 1;
  3. export function fun() {
  4.   console.log('fun');
  5. }
  7. let a = 1
  8. export a // 报错必须为声明语句
  11. // 方法二：export { 具名符号 }
  12. let name = 'chen';
  13. let age = 18;
  14. export { name, age };

2️⃣ 基本导入

由于使用了依赖预加载，因此导入任何其他模块，导入代码必须放置到所有代码之前
注意：

  1.   1. 导入时可以通过关键字 as 对导入的符号进行重命名
  2.   2. 导入时使用的符号是常量，不可修改
  3.   3. 如果使用 * 号导入，就可以将所有的基本导出和默认导出聚合到一个对象中，默认导出会以 default 关键词存在
  1. // module.js 导出
  2. export let a = 1;
  3. export function b() {
  4.   console.log('b');
  5. }
  7. let c = 3;
  8. let d = function () {
  9.   console.log('d');
  10. };
  11. export { c, d };
  15. // index.js 导入
  16. import { a, b, c as cc, d as dd } from './module.js';
  18. console.log(a); // 1
  20. console.log(b);
  21. /* 
  22. ƒ b() {
  23.   console.log('b');
  24. }
  25. */
  27. console.log(cc); // 3
  29. console.log(dd);
  30. /* 
  31. ƒ () {
  32.   console.log('d');
  33. }
  34. */
  1. // module.js 导出
  2. export let a = 1;
  3. export function b() {
  4.   console.log('b');
  5. }
  7. let c = 3;
  8. let d = function () {
  9.   console.log('d');
  10. };
  11. export { c, d };
  15. // index.js 导入
  16. import * as o from './module.js';
  18. console.log(o);
  19. /* 
  20. Module {Symbol(Symbol.toStringTag): 'Module'}
  21.   a: 1
  22.   b: ƒ b()
  23.   c: 3
  24.   d: ƒ ()
  25.   Symbol(Symbol.toStringTag): "Module"
  26.   get a: ƒ ()
  27.   set a: ƒ ()
  28.   get b: ƒ ()
  29.   set b: ƒ ()
  30.   get c: ƒ ()
  31.   set c: ƒ ()
  32.   get d: ƒ ()
  33.   set d: ƒ ()
  34. */
  36. console.log(o.a); // 1
  38. console.log(o.b);
  39. /* 
  40. ƒ b() {
  41.   console.log('b');
  42. }
  43. */
  45. console.log(o.c); // 3
  47. console.log(o.d);
  48. /* 
  49. ƒ () {
  50.   console.log('d');
  51. }
  52. */

1️⃣ 默认的导入导出

2️⃣ 默认导出

每个模块除了允许多个基本导出外，还允许有一个默认导出，因为默认导出只有一个，所以可以不用具名
默认导出的语法如下：

  1. // module.js 导出
  2. let a = 1;
  3. function b() {
  4.   console.log('b');
  5. }
  6. let c = 3;
  7. function d() {
  8.   console.log('d');
  9. }
  10. export default {
  11.   a,
  12.   b,
  13. };

2️⃣ 默认导入

默认导入会导入一个对象

  1. // module.js 导出
  2. let a = 1;
  3. function b() {
  4.   console.log('b');
  5. }
  6. let c = 3;
  7. function d() {
  8.   console.log('d');
  9. }
  10. export default {
  11.   a,
  12.   b,
  13.   c,
  14.   d
  15. };
  19. // index.js 导入
  20. import o from './module.js';
  21. console.log(o);
  22. /* 
  23. {a: 1, c: 3, b: ƒ, d: ƒ}
  24.   a: 1
  25.   b: ƒ b()
  26.   c: 3
  27.   d: ƒ d()
  28.   [[Prototype]]: Object
  29. */

1️⃣ 模块导入导出语法

2️⃣ 基本导入导出

  1. // 基本导出 - 逐个导出
  2. export let v = 10;
  3. export let obj = {};
  4. export let arr = [];
  5. export function fun() {}
  7. import { v, obj, arr, fun } from './i.js';
  8. import { v as a, obj as b, arr as c, fun as d } from './i.js';
  9. import * as require from './j.js'; // * 导入全部基本导出并从命名为一个对象 
  12. // 基本导出 - 一起导出
  13. let v = 10;
  14. let obj = {};
  15. let arr = [];
  16. function fun() {}
  17. export { v, obj, arr, fun };
  19. import { v, obj, arr, fun } require from './j.js';
  20. import { v as a, obj as b, arr as c, fun as d } from './i.js';
  21. import * as require from './j.js';

2️⃣ 默认导入导出

  1. let v = 10;
  2. let obj = {};
  3. let arr = [];
  4. function fun() {}
  5. export default {
  6.   v,
  7.   obj,
  8.   arr,
  9.   fun,
  10. };
  12. import require from './i.js';

2️⃣ 混合导入导出

  1. let v = 10;
  2. let obj = {};
  3. let arr = [];
  4. function fun() {}
  5. export { v, obj };
  6. export default {
  7.   arr,
  8.   fun,
  9. };
  11. import mr, { v, obj } from './i.js'; // 混合导入导出一起使用必须是默认导出在最前

1️⃣ 编译 ES6 语法

2️⃣ babel 转 ES6 为 ES5

3️⃣ 安装babel-cli, babel-preset-es2015和browserify:

第一步，全局安装：npm install babel-cli browserify -g
第二步，局部安装：npm install babel-preset-es2015 --save-dev
备注：若全局已经安装过browserify，可以在第一步中去除browserify

3️⃣ 创建.babelrc文件(给babel指定具体的任务)，内容如下：

  1. {
  2.    "presets": ["es2015"]
  3. }

3️⃣ 编译源代码（确保已进入06_ES6_Babel_Browserify所在文件夹）

第一步：使用Babel将ES6编译为ES5代码

  1.   1. 命令为: `babel js/src -d js/build`

第二步：使用Browserify编译js上一步生成的js

  1.   1. 命令为: `browserify js/build/app.js -o js/build/build.js`

备注：第一步操作后Babel将es6的模块化语法，转换成了CommonJS模块化语法（浏览器不识别），所以需要第二步用Browserify再次编译。

3️⃣ 页面中引入测试

  1. <script type="text/javascript" src="js/build/build.js"></script>