【ES6】export和important使用区别

　

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作为组件

 

 

应用2：

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