聊聊node.js中commonJS和ES6模块化

第一部分commonJS

一.核心模块部分（内置方法使用）

• 核心模块就是 Node 内置的模块，需要通过唯一的标识名称来进行获取。
• 每一个核心模块基本上都是暴露了一个对象，里面包含一些方法供我们使用。
• 一般在加载核心模块的时候，变量（或常量）的起名最好就和核心模块的标识名同名。
• 例如：const fs = require('fs'), const path = require('path')

1.第一种内置对象方法：const fs = require('fs')

(1)文件读取（fs.readFileSync）

使用fs.readFileSync()读取文件，第一个参数为文件名或文件描述符（必传）

//(同步读取)
// 第一步：导入三方库
const fs = require('fs')
// 第二步：读取文件
let content = fs.readFileSync(__filename,'utf-8')
//如果不输入utf-8，默认打印16进制 （元素.toString()转换）
console.log(content)   //放置在<Buffer>缓冲区

(2)文件写入（fs.writeFileSync)

// 第一步：导入三方库
const fs = require('fs')
// 第二步：读取文件
// (格式：)
//fs.writeFileSync(patName,content,option)
//参数1：要写入的文件路径---相对路径和绝对路径均可，推荐使用绝对路径
//参数2：要写入的文件的内容
//参数3：配置项，设置写入的字符集，默认utf-8
// 写入文件相对路径必须是./，千万别忘记打点了
fs.writeFileSync('./b.txt','哈喽 node','utf-8')

（3）捕获同步格式中的错误对象

try {
  // 可能会有错误的代码
} catch(err){
  // 如果try内的代码有错误，就会进入catch，并把错误传进来
  // console.log(err)
}

（4）获取绝对路径的两个全局变量（__filename）（__dirname）

• __filename：获取当前被执行的文件的绝对路径
• __dirname：获取当前被执行的文件的文件夹所处的绝对路径

（5）fs常用属性

API	作用	备注
fs.access(path, callback)	判断路径是否存在
fs.appendFile(file, data, callback)	向文件中追加内容
fs.copyFile(src, callback)	复制文件
fs.mkdir(path, callback)	创建目录
fs.readDir(path, callback)	读取目录列表
fs.rename(oldPath, newPath, callback)	重命名文件/目录
fs.rmdir(path, callback)	删除目录	只能删除空目录
fs.stat(path, callback)	获取文件/目录信息
fs.unlink(path, callback)	删除文件
fs.watch(filename[, options][, listener])	监视文件/目录
fs.watchFile(filename[, options], listener)	监视文件
fs.existsSync(absolutePath)	判断路径是否存在

2.第二种内置对象方法：const path = require('path')

（1）路径拼接 path.join( ) 

// 引入
const fs = require('fs')
const path = require('path')
// 使用
// 比如我要读取a.txt
let a =fs.readFileSync(path.join(__dirname,'..','/笔记文件夹','/a.txt'),'utf-8')
console.log(a)

（2）一般可用来获取路径中的文件名 path.basename

// 第一步：引入
const path = require('path')
// 第二步：使用（此方法返回 path 的最后一部分。
//一般可用来获取路径中的文件名）
console.log(path.basename(__filename))//文件名

方法	作用
path.basename(path[, ext])	获取返回 path 的最后一部分(文件名)
path.dirname(path)	返回目录名
path.extname(path)	返回路径中文件的扩展名(包含.)
path.format(pathObject)	将一个对象格式化为一个路径字符串
path.join([...paths])	拼接路径
path.parse(path)	把路径字符串解析成对象的格式
path.resolve([...paths])	基于当前工作目录拼接路径

二.导入导出模块部分 （在一个js模块导入另一个js模块）

• 导入其它模块时，统一使用 require() 函数。
• 每个 .js 文件，都是一个独立的模块，模块内的成员都是私有的。
• 在每个 JS 模块中，使用 module.exports 向外共享成员。

(1)导出js模块（module.exports或exports）

// 导出模块的两种方式
//(1)exports          //相当于是 let exports = module.exports

{
//不能写成 exports=值
 从：let exports = module.exports
 改成：let exports = 值 
 从而改变了exports的数值类型  失去了导出能力

}

//(2)module.exports   //可以导出任意值 数组 对象 数值 
//在引入某模块时：以该模块代码中module.exports指向的内容为准
//在导出模块过程中，建议只用一种方式（建议直接使用module.exports）
// 下面是要导出的变量
const myPI = 3.14
const add = function (a, b) { return a + b }
// 导出模式的两种写法
//(第二种)
module.exports = {
  add,
}

(2) 导入模块；格式：const 模块名 = require('./模块路径')

// CommonJS 规范导入其它模块时，统一使用 require() 函数
const derive = require('./导出.js')
console.log(derive)//{ add: [Function: add] }

第二部分ES6 模块

node.js 中默认支持 CommonJS 模块化规范，如果想基于 node.js 体验与学习 ES6 的模块化语法，需要按照如下两个步骤进行配置

• 确保安装了 v13.0.0 或更高版本的 node.js
• 在 package.json 的根节点中添加 "type": "module"节点

 注意： 配置之后，demo目录使用ES6模块化语法，不能再使用CommonJS语法了

es6的导入与导出（默认文件全部导出）

默认导出语法：export default 默认导出的成员

// 默认导出
// 默认导出的语法：export default 默认导出的成员

let obj1 = { name: "张三", age: "18" }

let obj2 = { name: "小花", age: "19" }

export default {
  obj1, obj2,
}

 默认导入语法：import 接收名称 from '模块路径

// 默认导入语法:import 接收名称 from '模块路径'
import obj from './tool.js'
console.log(obj) //{ obj1: {name:'张三',age:'18'}, obj2: {name:'小花',age:'19'}}

注意:

1. 每个模块中，只允许使用唯一的一次 export default
2. 默认导入时的接收名称可以任意名称，只要是合法的成员名称即可

 es6的导入与导出（按需选择文件导出）

 按需导出的语法： export const age = 18

// 按需导出语法：export const age = 18
export const age = 18

// 默认导出
export default {
  name: '小花',
  age: '20'
}

 按需导入的语法： import { 按需导入的名称 } from '模块路径'

// 按需导入的语法：import{按需到入的名称} from '模块路径'
// 别忘了路径后面的js
import obj, { age as gai } from './tool按需导出.js'
// 改名之后age=undefine gai=18
console.log(gai, obj)//18 { name: '小花', age: '20' }

第三部分：让chrome浏览器支持es6模块化

<script type="module" src="./index按需导入.js"></script>

第四部分：CommonJS 与 ES6 Module 的区别

这两者的主要区别主要有以下两点：

1. 对于模块的依赖，CommonJS是动态的，ES6 Module 是静态的
2. CommonJS导入的是值的拷贝，ES6 Module导入的是值的引用

对于模块的依赖，何为动态？何为静态？

 （1）动态是指对于模块的依赖关系建立在代码执行阶段；
 （2） 静态是指对于模块的依赖关系建立在代码编译阶段；