JavaScript: 模块导入导出
export - JavaScript | MDN (mozilla.org)
import - JavaScript | MDN (mozilla.org)
ES6 中引入了“模块”（module）。
导出模块就是让 .js 文件中的某些值对外可见，导入模块就是将那些对外可见的值导入到当前 .js 文件中。
模块导出、导入分别使用关键字 export、import。
如果在一个 .js 文件文件中使用了 export 或 import，那这个 .js 文件就会被当做一个模块。
在 HTML 中引入模块，以及，在 <script> 和 </script> 之间使用模块，都需要将 <script> 的属性 tyep 设为 module：
<script type="module" src="./im.js"></script>
<script type="module">
// code
</script>导出模块有两种方法：默认导出、命名导出。与之对应，导入模块也有两种方法：默认导入、命名导入。
每个模块只能有一个默认导出。
1 默认导出与导入
1.1 默认导出
默认导出使用关键字 default。
导出变量：
// 方法一
export default 'Tom';
// 方法二
const name = 'Tom';
export default name;
// 方法三
const name = 'Tom';
export {name as default}; // 大括号必不可少
导出函数：
// 方法一
export default function() {
console.log("miaow~");
};
// 方法二
function say() {
console.log("miaow~");
};
export default say;
// 方法三
function say() {
console.log("miaow~");
};
export {say as default};
导出对象：
// 方法一
export default {
name: 'Tom',
age: 3
};
// 方法二
const info = {
name: 'Tom',
age: 3
}
export default info;
// 方法三
const info = {
name: 'Tom',
age: 3
}
export {info as default}; // 大括号是必不可少的
1.2 默认导入
默认导入变量：
// 方法一
import tom from './ex.js';
// 方法二
import {default as tom} from './ex.js';
//导入后就可以使用了
console.log(tom);
默认导入必须指定名字，但名字可以任取（如本例中的 tom）。
默认导入函数：
// 方法一
import speak from './ex.js';
// 方法二
import {default as speak} from './ex.js';
//导入后就可以使用了
speak();
默认导入对象：
// 方法一
import tom from './ex.js';
// 方法二
import {default as tom} from './ex.js';
//导入后就可以使用了
console.log(tom.name);
2 命名导出与导入
2.1 命名导出
先声明、后导出：
const name = 'Tom';
let age = 3;
function say() {
console.log("miaow~");
};
export {name, age, say}; // 哪怕只导出一个值，也需要用花括号括起来
声明的同时导出：
export const name = 'Tom';
export let age = 3;
export function say() {
console.log("miaow~");
};
注意：
a) 即使是 let 声明的变量，在导入后也无法重新赋值，只能用作常量。
b) 导入前可以重新赋值。
export let age = 3;
age = 1; // 最终导出的值为 1
使用别名导出：
const name = 'Tom';
export {name as newName};
注意：使用别名导出，就必须使用别名导入。
2.2 命名导入
建议将导入语句放在模块的顶部。（就算不这样做，import 语句也会被自动提升到模块顶部）
假设导出文件为同一目录下的 ex.js。
import {name, age, say} from './ex.js'; // 与解构赋值很像
console.log(name);
console.log(age);
say();
导入时可以重命名：
import {name as newName, age, say} from './ex.js'; // 与解构赋值很像，但使用的是 as，而非冒号
console.log(newName);
console.log(age);
say();
一次性全部导入：
import * as Info from './ex.js';
console.log(Info.name);
console.log(Info.age);
Info.say();
注意：一次性导入时，必须指定集合名（如本例中的 Info）
其它
1 命名导入和默认导入可以在一条 import 语句内完成：
//方法一
import {default_import as default, named_export0, named_export1} from './*js';
//方法二
import default_import, {named_export0, named_export1} from './*js';
//方法三
import default_import, * as setName from './*js';
2 在 ES6 之前，就已经出现了模块规范 CommonJS。CommonJS 使用 require、exports 来导入、导出模块。
node.js 默认就是使用 CommonJS。可以通过设置目录层次中最近的 package.json 中"type": "module" 来强制该项目下的所有文件使用 ECMAScript 模块。
{
"type": "module"
}也可以将文件后缀改为 .mjs，以使单个文件使用 ECMAScript 模块。
其它方法详见：Modules: Packages | nodejs.org v17.6.0（注意，请使用较新版本的 node.js）
3 导入模块并执行。
如下所示。
ex.js：
console.log(1)
in.js：
console.log(2)
import './ex.js'; // 这种导入方式并不能使用 ex.js 中的函数、对象等，但可以使用直接执行 ex.js 中的代码（称之为“副作用”）
执行结果：
1 // 这是由于 import 的自动提升
24 使用 import 时，最后遵循以下建议：
a) 相对路径都以 ./ 开头。如 import {a} from './ex.js'。如果不以 ./ 开头，那 nodejs 会以为是从 node_modules 中导入的。
b) 不要省略文件后缀 .js。否则，浏览器可能会把 import {a} from './ex' 中的 ./ex 误以为是网址。
c) 即使要导入的是 index.js ，也要写全路径和文件名。（webpack 可以省，但 nodejs 不能省）
5 nodejs 中使用 import
在nodejs 中使用 import 导入包，实际导入的是哪个文件呢？
package.json 有三个顶级属性：main、browser、module。
main 是 nodejs 官方支持的属性。
browser 也得到了 npm 的支持。
module 没有得到官方支持，但被广泛使用。
在 vuecli 中，实际导入的是 module 属性中定义的 js 文件。