十. ES6中的export和import的几种方式汇总

1. 前言

学习vue的时候，总是碰到好几种花样的export和import的方式！这里来总结一下

2. export暴露数据的语法汇总（3种）

（1）分别暴露

• 语法：在定义变量或函数的前面加export关键字！
• 举例：

export let a = 1;
export function b() {
	~~~
}

（2）统一暴露

• 语法：用export关键字单独写一行用于暴露数据。
• 举例：

let a = 1;
function b() {
	~~~
}
export {a,b};

注意事项

• export统一暴露时，若某些成员在import导入时不需要，可以不在{ }中定义
• 使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名

（3）默认暴露

• 语法：用export default关键字包含所有要暴露的数据。
• 举例：

export default {
	//let a = 1, 错误形式
	//正确
	function b() {
		~~~
	},
	//正确，对象形式
	c: 'hello',
	//正确，对象形式
	d: function() {
		~~~
	}
}

注意事项：

• 对于这样的方式，若想要通过引入模块import调用里面的具体数据的话，就要多加一层default。例：模块名.default.函数名()或模块名.default.变量名
• export default内包含的数据可以是对象形式（键值对），可以是函数形式。并且要用逗号分割，不是分号。
• 若在html文件中使用<script>标签中import模块的话，要设置<script>标签的type属性为module，因为默认不能使用module形式，即不能使用import导入文件
• export default 向外暴露的成员，可以使用任意变量来接收
• 在一个模块中，export default 只允许向外暴露一次
• 在一个模块中，可以同时使用export default 和export 向外暴露成员

3. import引入数据模块的语法汇总（3种）

（1）通用导入方式

import * as 模块别名 from '相对地址';

（2）解构赋值形式

import {暴露的变量名} from '相对地址';

若要引入的两个模块有相同的变量名，则用as关键字起别名。例：

import {a } from './m1.js';
import {a as b} from './m2.js';

（3）简便形式（只适用于默认暴露）

import 模块别名 from '相对地址';

（4）import导入模块注意事项：

1）使用vue-cli脚手架扫描js代码部分的规则：在全部的js的代码中，会优先执行import，然后执行其他代码，而执行import导入模块时，会将要导入的模块从上至下执行一遍（因为要找到什么数据暴露了）
2）import导入模块的相对地址，有不写文件名的情况，如stroe/index.js文件，只需要这样写即可import ~ from './stroe'，不用写文件名。因为会默认扫描index.js文件

4. 遗留问题：

（1）module.exports算什么暴露方式？为什么使用module.exports暴露的数据可以使用“import解构赋值形式”和“import简便形式”导入数据。

这里确实不懂
https://blog.csdn.net/gwdgwd123/article/details/104626274
解答：https://ask.csdn.net/questions/7671983?spm=1001.2014.3001.5505

你要是 写node的后台的话 必须使用 require 因为你的运行环境是node node使用的是commonjs的模块化 不支持前端模块
例如 node的 fs模块 只能 require(‘fs’)
但是vue是基于node环境开发的 import 可以导入 module.exports和export 的内容

5. 补充：

（1）webpack默认对外暴露的：图片、JSON数据格式。也就是说，不用暴露，也可以用import导入
（2）假设情景：文件1导入文件2中。若文件1没有用export对外暴露数据，文件2也不准备调用文件1的数据，只是想要文件1在文件2中被执行一次，那就可以省略from关键字。举例：尚品汇32集。import '@/mock/mockServe'
（2）若导入的是css样式，则不用使用from关键字进行引入，直接import即可！举例：引入swiper样式import "@/swiper/css/swiper.css"