导入导出的基本语法
导出
使用 export 关键字可以将代码暴露给其他模块，它可以放在任何变量、函数、类声明或者引用的前面。
// 导出声明
export function test1(num){return num*4}
// 导出引用
function test2(num){return num*4}
export {test2}
导入
使用 import 和 from 关键字导入其他模块的功能。
// 导入一个
import { name1 } from './example.js'
// 导入多个
import { name1, name2} from './example.js'
// 导入全部
import * as example from './example.js'
example.name1
导入的路径需要加上扩展名，例如这里的.js。
注意点
- 导入和导出的语句必须在其他语句和函数之外使用，否则会报错。
- 通过
import导入的变量、函数、类都是只读不可修改的。
CommonJs
es6 之前也是有一些模块加载方案的，比如 CommonJs 和 AMD 之类的，nodeJs 和 Webpack 中使用的是 CommonJs。
//导出
exports.test1 = function test1(num){return num*4}
//导入: 不需要写扩展名
let {test1} = require('./example')
一般情况下不要混用不同模块加载方案的写法，虽然你这么写很多打包工具也支持也会生效。
导入导出重命名
as 关键字重命名导出模块的名称。
导出
function sum(num1, num2){return num1+num2}
export { sum as add }
导入
// 将 add 重命名为 myAdd
import { add as myAdd } from './example.js'
导入导出默认值
导出
一个模块只能设置一个默认的导出值，多次使用 default 关键字会报错。
// 用法1
export default function(num1, num2){return num1+num2}
// 用法2
function sum(num1, num2){return num1+num2}
export default sum
// 用法3
function sum(num1, num2){return num1+num2}
export { sum as default }
导入
导入默认值的时候不必再加大括号，标识出导入的名字了。
// 用法1
import anyName from './example.js'
// 用法2
import { default as anyName } from './example.js'
导入导出小用法
重新导出导入
import {sum} from './example.js'
export {sum}
导入 sum 后马上又导出，可以简化为一句，使用 export from
export {sum} from './example.js'
无绑定导入
当我们在一个模块中改变的是全局作用域中的内容时，我们并不想导入什么具体的模块，只想导入一个模块让其执行一下，就可以使用无绑定导入。
// 向 Array 这个内建对象上添加了一个 pushAll 方法
Array.prototype.pushAll() = function() {...}
// 导入时就向 Array 上添加了 pushAll 方法
import './example.js'
在Web浏览器中使用模块
script 标签中，当 type="module" 时，支持加载模块。
<script type="module" src="./test1.js"></script>
当使用 type="module" 时自动应用了 defer 属性，立即下载但直到文档被完全解析之后才被执行，会按照书写的顺序去执行。
导入路径规范
- 以 / 开头：从根目录开始
- 以 ./ 开头：从当前目录开始
- 以 ../ 开头：从父目录开始
- URL格式
只有以上四种写法时生效的，其他无效。
