【Node.js】模块化

概述

Nodejs 模块化规范遵循两套规范:

  • Common JS
  • ES Module

Common JS

引入模块(require)支持四种格式

  • 支持引入内置模块例如 http os fs child_process 等const fs = require('fs'),高版本也可以使用const fs = require('node:fs')便于区分
  • 支持引入第三方模块express md5 koa 等const md5 = rquire('md5')
  • 支持引入自己编写的模块require('./test.js')
  • 支持引入addon, napi 等 C++扩展模块 (编译后为.node文件)
  • 支持引入 json 文件 const data = require('./data.json')

导出模块exports 和 module.exports

js 复制代码
module.exports = {
  code: 200,
  hello: function() {
    console.log('Hello, world!');
  }
};

如果不想导出对象直接导出值: module.exports = 123

导入: const myTest = require('./MyTest.js'),类似解构赋值导入也可以。

ESM

引入模块 import 必须写在头部

使用ESM模块的时候必须开启一个选项

打开package.json 设置 type:module

import fs from 'node:fs'

如果要引入json文件需要特殊处理,需要增加断言并且指定类型 json,而且要注意node低版本不支持。import data from './data.json' assert { type: "json" }; console.log(data);

加载模块的整体对象 import * as all from 'xxx.js'

动态导入模块,import静态加载不支持掺杂在逻辑中。如果想动态加载使用import函数模式

js 复制代码
if(true){
    import('./test.js').then()
}

模块导出

导出一个默认对象 default只能有一个不可重复export default

js 复制代码
// export  default 只能有一个
export default {
    name: 'test',
}

导出变量

js 复制代码
export const a = 1

cjs 和 esm 的区别

  1. cjs 基于运行时的同步加载,esm 基于编译时的异步加载(也就是为什么import需要写在顶端,就是因为需要编译时就要引入,而非在运行时才会加载)
  2. cjs 可以修改值,esm 不可以修改(只读)
  3. cjs 不支持 tree shaking ,esm 支持 tree shaking
  4. cjs 顶层的 this 指向这个模块本身, esm 顶层的 this 指向 undefined
相关推荐
还是鼠鼠2 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
鸠摩智首席音效师4 小时前
PM2 restart 和 reload “–update-env“ 选项的使用
node.js
落日弥漫的橘_1 天前
Node.js下载安装及环境配置教程 (详细版)
前端·node.js·环境配置·node安装教程
16年上任的CTO1 天前
一文大白话讲清楚webpack进阶——9——ModuleFederation实战
前端·webpack·node.js·模块联邦·federation
skinGap1 天前
Node.js 中文编码问题全解析
node.js·jenkins·android-studio
前端杂货铺2 天前
Node.js——body-parser、防盗链、路由模块化、express-generator应用生成器
node.js·express
16年上任的CTO2 天前
一文大白话讲清楚webpack进阶——8——Module Federation
前端·webpack·node.js·模块联邦·federation
我命由我123452 天前
Tailwind CSS - Tailwind CSS 引入(安装、初始化、配置、引入、构建、使用 Tailwind CSS)
前端·javascript·css·npm·node.js·js
躲在没风的地方3 天前
vue框架技术相关概述以及前端框架整合
node.js·vue
小韩学长yyds3 天前
前端实战:小程序搭建商品购物全流程
javascript·css·vue.js·小程序·前端框架·node.js·html5