[转] ES6 import/export:模块导入导出方式

时间：2022-03-08 00:28:24
export导出语法

// default exports

export default 42;

export default {};

export default [];

export default foo;

export default function () {}

export default class {}

export default function foo () {}

export default class foo {}

// variables exports

export var foo = 1;

export var foo = function () {};

export var bar; // lazy initialization

export let foo = 2;

export let bar; // lazy initialization

export const foo = 3;

export function foo () {}

export class foo {}

// named exports

export {foo};

export {foo, bar};

export {foo as bar};

export {foo as default};

export {foo as default, bar};

// exports from

export * from "foo";

export {foo} from "foo";

export {foo, bar} from "foo";

export {foo as bar} from "foo";

export {foo as default} from "foo";

export {foo as default, bar} from "foo";

export {default} from "foo";

export {default as foo} from "foo";

示例：

1、export {function};

　　导出一个函数

2、export const foo = 2;

　　导出一个常量

3、export default myFunctionClass;

　　默认导出，每个模块只有一个默认导出，导出的可以是一个函数，一个对象，一个类

import导入语法

// default imports

import foo from "foo";

import {default as foo} from "foo";

// named imports

import {bar} from "foo";

import {bar, baz} from "foo";

import {bar as baz} from "foo";

import {bar as baz, xyz} from "foo";

// glob imports

import * as foo from "foo";

// mixing imports

import foo, {baz as xyz} from "foo";

import * as bar, {baz as xyz} from "foo";

import foo, * as bar, {baz as xyz} from "foo";

示例

1、import name from 'my-module.js' ;

　　导出整个模块到当前作用域，name作为接收该模块的对象名称

　　

2、import {moduleName} from 'my-module.js';

   导出模块中的单个成员moduleName

3、import {moduleName1,moduleName2} from 'my-module';

　　导出模块中的多个成员moduleName1、moduleName2

　　

4、import {moduleName as moduleAlias} from 'my-module';

5、import myDefault,{moduleName1,moduleName2} from 'my-module';

　　myDefault为my-module.js文件default导出项

注意事项

导入语句只能作为模块顶层的语句出现，不能出现在 function 里面或是 if 里面

if(Math.random()>0.5){

  import './module1.js'; // SyntaxError: Unexpected keyword 'import'

}

const import2 = (import './main2.js'); // SyntaxError

try{

  import './module3.js'; // SyntaxError: Unexpected keyword 'import'

}catch(err){

  console.error(err);

}

const moduleNumber = 4;

import module4 from `module${moduleNumber}`; // SyntaxError: Unexpected token

import 语句会被提升到文件顶部执行，也就是说在模块初始化的时候所有的 import 都必须已经导入完成

import './module1.js';

alert('code1');

import module2 from './module2.js';

alert('code2');

import module3 from './module3.js';

// 执行结果

module1

module2

module3

import 的模块名只能是字符串常量，导入的值也是不可变对象；比如说你不能 import { a } from ‘./a’ 然后给 a 赋值个其他什么东西

相关文章