概念

就是将JS文件的内容以模块化的方式进行导出，再另一个JS文件导入使用。

关键词：export、import。

export的导入导出

a.js中导出：

export function a(n) {
  console.dir("a" + n);
}
export function b(n) {
  console.dir("b" + n);
}
export function c(n) {
  console.dir("c" + n);
}

b.js中选择性引入：

import { a, b as B } from "./a.js"; // 选择性导入a，b导入后改名为B

a("可直接使用")

这种方式我觉得适合一些比较大的js库，可以引入所需部分。

b.js中全部引入：

import * as obj from "./a.js"; // 全部导出是个*表示，然后命名为obj，是个对象

obj.a("可直接使用");

export default的导入导出

a.js中导出：

export default {
  a: function (n) {
    console.log("a" + n);
  },
  b: function (n) {
    console.log("b" + n);
  }
};

或者

function a(n) {
  console.log("a" + n);
}
function b(n) {
  console.log("b" + n);
}
export default {
  a, // es6的语法省略
  b,
};

b.js中引入：

import utils from "./a.js";  // 默认要以对象的形式接收

utils.a("以对象的形式使用");

注意：如果项目用webpack的话，引用 ./ 不能省略，因为是通过webpack来进行的编译，而webpack又是通过node写出来的，所以要遵循node的规定；

export与export default同时写

这两个可以同时出现在一个js文件中：

const obj = { a: 'a' }
export class Person {}
export default obj

默认导出的是obj，要导入Person就需要手动写：

import obj, { Person } from './index.js'

借助webpack导出

适用场景，例如一个icon文件夹中有很多名字有规律的图片：

---icon
	---icon1.png
	---icon2.png
	...

我们可以在文件夹里建个js，然后写上：

const context = require.context('./', true, /.png$/)

let iconMap = {}
context.keys().forEach((filename) => {
    iconMap[filename.slice(2, 6)] = context(filename).default
})

export default iconMap

在其他文件中导入就能获取到一个存放key为文件名，value为base64图片的对象啦。

commonJS导入导出规范

这个是node的导入导出规范，认识一下即可；

a.js中：

function a(n) {
  console.dir("a" + n);
}
function b(n) {
  console.dir("b" + n);
}
function c(n) {
  console.dir("c" + n);
}
module.exports = {
	a,
	b,
	c
}

b.js中引入：

const utils = require('./a.js')
utils.a()

具体看：【Node.js】学习系列2-commonJS的模块规范