彻底搞清楚 export import 使用细节

/** 
 * ES6中的export、import、export default详解
 * 1.在ES5中，如果你的js文件是依赖于其他js文件（例如：jquery、bootsrap.js等），那么你必须在html中先加载这些依赖，也就是要控制好每个js的加载顺序。
 * 2.在ES6中就引入了export与import概念，将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。
 * 3.官方对export的解释是：一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
 * 4.export命令定义了模块的对外接口
*/

/**
 * 示例1：profile.js
*/
export var firstName = 'Michael';
export const year = 1958;

/**
 * 示例2：profile.js
*/
var firstName = 'Michael';
const year = 1958;
export { firstName, year };

/**
 * 示例3：profile.js
*/
export function multiply(x, y) {
    return x * y;
};

/**
 * 示例4：profile.js
*/
function fn1(x, y) { return x + y; }
function fn2(x, y) { return x * y; }
export {
    fn1 as add,
    fn2 as multiply
};

/**
 * 示例5：profile.js
*/
export default class { }

/**
 * 错误示例：profile.js
 * 1.下面两种写法都会报错，因为没有提供对外的接口，两种错误其实都是因为直接输出值了
 * export 1;
 * var m = 1;
 * export m;
 * 
 * 2.下面错误跟上面的相同，必须提供的是接口
 * function f() {}
 * export f;
 * 
 * 3.这种错误是因为export命令必须处于模块顶层才可以，也就是不能出现在代码块里面，这里涉及到import的编译时加载原理
 * function foo() {
 *   export default 'bar' // SyntaxError
 * }
 * foo()
*/

/**
 * 示例1：main.js
 * 使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
 * 下面代码的import命令，用于加载profile.js文件，并从中输入变量。
 * import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
*/
import { firstName, year } from './profile';
function setName(element) {
    element.textContent = firstName + ' ' + lastName;
}

/**
 * 示例2：main.js
 * 如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
*/
import { firstName as name } from './profile';

/**
 * 示例3：main.js
 * import命令具有提升效果，会提升到整个模块的头部，首先执行。
 * 下面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。
*/
foo();
import { foo } from 'my_module';

/**
 * 示例4：main.js
 * 不重复加载，下面两行代码等同于一行 import { foo, bar } from 'my_module';
 * 下面代码中，虽然foo和bar在两个语句中加载，但是它们对应的是同一个my_module实例。也就是说，import语句是 Singleton 模式。
*/
import { foo } from 'my_module';
import { bar } from 'my_module';


/**
 * 错误示例：main.js
 * 1.由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构
 * import { 'f' + 'oo' } from 'my_module';//使用了表达式
 * 
 * let module = 'my_module';//使用了变量
 * import { foo } from module;
 * 
 * if (x === 1) {//使用了if结构
 *   import { foo } from 'module1';
 * } else {
 *   import { foo } from 'module2';
 * }
 * 
 * 2.同export一样的import不能出现在代码块，由于import是编译时加载
*/


/**
 * export default 示例1
 * 使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。
 * 但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
 * 为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
 * 需要注意的是，这时import命令后面，不使用大括号。
*/
// profile.js
export default function () {
    console.log('foo');
}
// main.js
import customName from './profile';
customName(); // 'foo'

/**
 * export default 示例2
 * export default命令用在非匿名函数前，也是可以的。
 * 下面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
*/
// profile.js
export default function foo() {
    console.log('foo');
}
// main.js
import customName from './profile';
customName(); // 'foo'

/**
 * export default 示例3
 * 注意和export的区别，export default也可以这样用。
 * 下面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
*/
// profile.js
function foo() {
    console.log('foo');
}
export default foo;
// main.js
import customName from './profile';
customName(); // 'foo'

/**
 * export default 示例4
 * 下面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；
 * 第二组是不使用export default时，对应的import语句需要使用大括号。
 * 
 * export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。
 * 所以，import命令后面才不用加大括号，因为只可能对应一个方法。
*/
// 第一组
export default function foo() { // profile.js
    console.log('foo');
}
// 或者
// function foo() { // profile.js
//     console.log('foo');
// }
// export default foo;
import foo from 'profile'; // main.js

// 第二组
export function foo() { // profile.js
    console.log('foo');
};
// 或者
// function foo() { // profile.js
//     console.log('foo');
// }
// export { foo };
import { foo } from 'profile'; // main.js

/**
 * export default 示例5
 * 本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。
*/
// profile.js
function add(x, y) {
    return x * y;
}
export { add as default }; // 等同于 export default add;

// main.js
import { default as xxx } from 'modules'; // 等同于 import xxx from 'modules';

/**
 * export default 示例6
 * 正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
 * export default var a = 1; // 错误
*/
export var a = 1; // 正确

var a = 1;
export default a; // 正确

/**
 * export default 示例7
 * 因为export default本质是将该命令后面的值，赋给default变量以后再默认，所以直接将一个值写在export default之后。
 * export 42; // 错误，没有指定对外的接口
*/
export default 42; // 正确，指定外对接口为default。

/**
 * export default 示例8
 * 可以在一条import语句中，同时输入默认方法和其他变量
 * 上面代码的最后一行：暴露出forEach接口，默认指向each接口，即forEach和each指向同一个方法。
*/
// lodash.js
export default function (obj) {
    // ···
}
export function each(obj, iterator, context) {
    // ···  
}
export { each as forEach };

// main.js
import _, { each, forEach } from 'lodash';


/**
 * export default 示例9
 * export default也可以用来输出类
*/
// MyClass.js
export default class {
    // ···
}

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

　　

参考：https://blog.csdn.net/qq_27552077/article/details/72902926