export命令

export { name1, name2, …, nameN };

export { variable1 as name1, variable2 as name2, …, nameN };

export let name1, name2, …, nameN; // also var, function

export let name1 = …, name2 = …, …, nameN; // also var, const

export default expression;

export default function (…) { … } // also class, function*

export default function name1(…) { … } // also class, function*

export { name1 as default, … };

export * from …;

export { name1, name2, …, nameN } from …;

export { import1 as name1, import2 as name2, …, nameN } from …;

export命令 注意事项

1.使用export default命令，默认输出时，important命令可以为该匿名函数指定任意名字

// export-default.js

export default function () {

  console.log('foo');

}

// import-default.js

import customName from './export-default';

2.使用export default时，对应的import语句不需要使用大括号否则对应的import语句需要使用大括号

// 第一组

export default function crc32() { // 输出

  // ...

}

import crc32 from 'crc32'; // 输入

// 第二组

export function crc32() { // 输出

  // ...

};

import {crc32} from 'crc32'; // 输入

3.export defaut后面不能跟变量声明语句，因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后。

// 正确

export var a = 1;

// 正确

var a = 1;

export default a;

// 错误

export default var a = 1;

// 正确

export default 42;

// 报错

export 42;

　4.export命令规定的是对外接口，必须与模块名字一 一对应，但是可以通过as关键字更名

//与模块变量的名字一 一对应

function v1() { ... }

function v2() { ... }

export {

  v1 as streamV1,

  v2 as streamV2,

  v2 as streamLatestVersion

};

//对外接口

//错误写法

// 报错

export 1;

// 报错

var m = 1;

export m;

//正确写法

// 写法一

export var m = 1;

// 写法二

var m = 1;

export {m};

// 写法三

var n = 1;

export {n as m};

import命令

import defaultExport from "module-name";

import * as name from "module-name";

import { export } from "module-name";

import { export as alias } from "module-name";

import { export1 , export2 } from "module-name";

import { export1 , export2 as alias2 , [...] } from "module-name";

import defaultExport, { export [ , [...] ] } from "module-name";

import defaultExport, * as name from "module-name";

import "module-name";

import命令注意事项

1.作用域提前

foo();

import { foo } from 'my_module';

2.import命令是静态执行，不能使用表达式和变量

// 报错

import { 'f' + 'oo' } from 'my_module';

// 报错

let module = 'my_module';

import { foo } from module;

// 报错

if (x === 1) {

  import { foo } from 'module1';

} else {

  import { foo } from 'module2';

}

范例：　　

应用1：引入某个vue作为组件

import "@/styles/skill/index.scss";

import index from "@/utils/skill/index.js";

export default {

    ...index

};

相关资料：https://www.cnblogs.com/diligenceday/p/5503777.html

　　　　   http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632

　　　　  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

作者：smile.轉角

QQ：493177502