import、export使用介绍

import、export使用介绍

ES6提供的import、export方法， 使组件化开发模式迈向新高度。本文来介绍import、export的语法及使用方法。

根据 export 的导出方式，可以概括为命名导出、默认导出两种方式。

命名导出常用语法：

export { name1, name2, ..., nameN };  
export { variable as name1, variable as name2, ..., nameN };  
export const name1 = ..., name2 = ..., nameN; // also var, let  
export * from ...;  
export { name1, name2, ..., nameN } from ...;  
export { import1 as name1, import2 as name2, ..., nameN } from ...;  

默认导出：

export default expression;
export default function() { ... }; // also class, function*
export default function name1() { ... }; // also class, function*
export { name1 as default, ... };

对应 export 的多种导出方式，import 也有多种倒入方式，使调用方式更加灵活多变。

import 使用语法如下：

import defaultExport from 'module-name';
import * as name from 'module-name';
import { exportName1, exportName2, ... } from 'module-name';
import { exportName1, exportName2 as alias, ... } from 'module-name';
import defaultExport, * as name from 'module-name';
import 'module-name';

---

接下来，我们将根据常见使用场景来举例说明使用方法。

导出已声明的变量或函数：

util.js

const aaa = 'aaa';

function cube(x) {
  return x * x * x;
}

// 导出已声明的变量时，只能用这种方式，否则会报错
export { aaa, cube };

上述导出的引用方式如下：

index.js

import { aaa, cube } from './util';

console.log(aaa, cube);  //  'aaa' 8

考虑到导出变量名 aaa 的语义化辨识度低，可考虑如下引入方式：

import { aaa as baseStr, cube } from './util';

console.log(baseStr, cube(2)); // 'aaa', 8

此时，若在index.js文件中调用变量aaa，会提示" aaa is not defined " 。

变量命名费时费心还怕冲突吗？直接导入整个模块也不错：

import * as util from './util';

console.log(util.aaa, util.cube(2)); // 'aaa' 8

若只需引入 cube 方法，引用方式如下：

import { cube } from './util';

console.log(cube(2)); // 8

也可以直接导出声明的变量或函数，如下：

export const aaa = 'aaa';

export function cube(x) {
  return x * x * x;
}

使用方式与先声明再导入的使用方式一致，不在赘述。

---

export 方式决定了 import 方式。上述的多种引入方式中，引入的变量名都是固定的，即引入的变量名必须与导出的变量名保持一致。而 export 的默认导出却能打破这个限制。

可以被设置为默认导出的，有以下几种情况：

默认导出函数：

util.js

export default function cube(x) {
  return x * x * x;
}

index.js

import math from './util';

console.log( math(2)); // 8

默认导出类：

util.js

export default class {
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
}

index.js

import Person from './util';

const obj =  new Person('xiaoming', 24);

console.log( obj ) ;  //  { name: 'xiaoming', age: 24 }

默认导出表达式：

util.js

export default 1 + 2;

index.js

import result from './util';

console.log( result ) ; // 3

注：不能使用var、let、const语句直接作为默认导出，可以声明变量后再作为导出
错误示例：

export default const aaa = 'aaa';

正确示例：

const aaa = 'aaa';

export default aaa;

默认导出的其他尝试：

1，每个组件只能有一个默认导出语句，否则会报错 "Duplicate export 'default'"
2，一个组件包含默认导出与命名导出，如下：
util.js

const aaa = 'aaa';

export { aaa };
export default 1 + 2; 

index.js

import result, { aaa } from './util’;  // 默认导出命名在前，否则会报错

console.log( result, aaa ) ; // 3 'aaa'

兼容性

截止目前，有些浏览器并不支持 import 与 export 方法，在实际项目中多使用转换器做转换来实现，常用转换器有：Babel、Webpack、Rollup等。