#Js篇：export & import、export default & import、exports & require的用法总结

一、export导出 & import导入

export导出变量、方法、模块等

例如： a.js
// export -1
export const str = "export的内容";
export  const year =2019;
export function myFunction() {
  console.log('Hello World');
}

// export -2
// 除了上述的写法，还有一种推荐使用的，尾部导出明了。
const str = "export的内容";
const year =2019;
function myFunction() {
 console.log('Hello World');
}
export {str,year ,myFunction}

import

import { str, year, myFunction } from './myModule.js';
myFunction() // outputs 'Hello World'

二、export default & import

export default

一个js文件里面export default仅有一个

//a.js
const str = "export default的内容";
export default str
// 在另一个文件中的导入方式： 
//b.js 
import StrFile from 'a'; 
//导入的时候没有花括号
//本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你引入的时候为它取任意名字。

export {default as Home} from './Home.js'
export {default as Side} from './Side.js'
export {default as Nav} from './Nav.js'

既然这种写法是集导入导出为一体的，那么它应该可以拆分成两行代码去写

export {default as b} from './table.js'

拆分后

import {default as b} from './table.js'
export b

这里你可能感觉很奇怪，怎么import还能defalut了？这里我需要花费一些文字帮你解读一下
众所周知：如果我们是export default的话，我们import的时候无需写{}，直接进行导入就可以了，但是其实我们有多种导入选择。
export导出

// index.js
var str='我爱前端'
export default str

import导入（1）

import str from './index.js'

import导入（2）

import {default as str} from './index.js

其实，下面这种写法才是常规写法。上面直接导入的这种，只是简写而已

引用解释
https://blog.csdn.net/chengqige/article/details/121221779

import

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

上面写法是逐一指定要加载的方法，整体加载的写法如下。
import * as circle from ‘./circle’;
注意：
1、export default 向外暴露的成员，可以使用任意变量来接收
2、在一个模块中，export default 只允许向外暴露一次
3、在一个模块中，可以同时使用export default 和export 向外暴露成员
4、使用export向外暴露的成员，只能使用{ }的形式来接收，这种形式，叫做【按需导出】
5、export可以向外暴露多个成员，同时，如果某些成员，在import导入时不需要，可以不在{ }中定义
6、使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收
7、使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名
例如：

// test.js
const info = {
    name: 'zs',
    age: 20
}
export default info
export const title = '小星星'
 export const content = '哈哈哈'

在main.js中接收，test.js使用export default 和 export 向外暴露的成员

import person, {title, content as content1} from './test.js'

https://blog.csdn.net/sleepwalker_1992/article/details/81461543

三、exports & require

require
运行时调用,
动态执行的,
所以require理论上可以运用在代码的任何地方，
所以在性能上会比import差一些,
require导入模块就没那么复杂了,
导出时是什么样,
导入时就还是什么样
其中,导出可以用:

  // output.js
  const Name1 = 'hhh1';
  const Name2 = 'hhh2';
  module.exports = { 
    Name1, 
    Name2,
  };

导入

// input.js
  const test = require('./output.js');
  console.log(test.Name1); // hhh1
  console.log(test.Name2); // hhh2