React系列（五）：NodeJS模块化操作

历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import， 但是JavaScript任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

es6中新增了两个命令export和import，export命令用于规定es6模块的对外接口，import 命令用于输入其他es6模块化提供的功能。
一个es6模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量， 就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。

编写单独的模块（a.js文件）

// ES6采用严格模式，注意单引号、空格、分号、最后的空行的使用
// 定义三个变量
let a = 20
let b = 30
let c = 'hello'
// 将变量导出，外部使用此文件中的变量时，需要使用import { a, b, c } from 'a.js'方式进行导入
export { a, b, c }

外部（main.js）使用此模块，需要先执行导入 import{变量名1[，变量名2，变量名3,…]} from ‘文件’

// 此处导入变量时，需要明确知道变量名称{ a, b, c }
import { a, b, c } from './files/a.js'
console.log(a, b, c)

export 不只是能导出普通变量，还可以导出其他的数据类型（a.js）

// 可以导出很多东西，比如函数、对象等
export const add = function (a, b) {
    return a + b
}
export const subtract = function (a, b) {
    return a - b
}
// 导出对象
export const stu = {
    name: 'aaa',
    age: 40
}

外部使用此模块中导出的函数、对象（main.js）

// 此处导入变量时，需要明确知道变量名称{ a, b, c }
import { a, b, c, add, subtract, stu } from './files/a.js'
// 调用导入的方法
let x = add(a, b)
console.log(x)
x = subtract(a, b)

// 使用导入的对象
console.log(stu)

也可以一次导入所有变量 import * as 标识符 from ‘文件’（main.js）

// 也可以导入所有变量、方法、对象,并作为对象obj的属性进行使用
import * as obj from './files/a.js'

console.log(obj.a, obj.b, obj.c)
// 调用导入的方法
let x = obj.add(obj.a, obj.b)
console.log(x)
x = obj.subtract(obj.a, obj.b)

// 使用导入的对象
console.log(obj.stu)

默认导出 export default （exportDefault .js）

export default指定默认导出，这在模块只有一个变量输出时非常常用；引用该模块时，用户不需要知道要引入的变量名称是什么，而是在引用位置给变量（函数、对象、类）指定名称

// 一个模块只允许出现一个export default
// （此语句实质返回了一个名称为 'default' 的变量）
export default {
    data: {
        name: 'aaaa',
        age: '30',
        say: function () {
            console.log(this.name, this.age)
        }
    }
}

外部引用模块时可以为模块变量命名（main.js）

// 为默认导出的变量命名为student
import student from './files/exportDefault.js'

// 使用导入的变量
student.data.say()

export default命令让加载模块变得更容易理解，如下代码：

// 有了export default命令，加载模块时就非常直观了，以一些常用的模块为例
import $ from 'jQuery' // 加载jQuery 库
import _ from 'lodash' // 加载 lodash
import Vue from 'vue'   // 加载 Vue