Node.js中的导入导出

Node.js中的导入导出

一.CommonJs标准

导出语法:

javascript 复制代码
module.exports = {
  对外属性名: 模块内私有变量
}

导入语法:

javascript 复制代码
const 变量名 = require('模块名或路径')
// Node.js 环境内置模块直接写模块名(例如:fs,path,http)
// 自定义模块:写模块文件路径(例如:./utils.js)

代码实现

utils.js:导出

javascript 复制代码
/**
 * 目标:基于 CommonJS 标准语法,封装属性和方法并导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 导出
module.exports = {
  url: baseURL,
  arraySum: getArraySum
}

index.js:导入使用

javascript 复制代码
/**
 * 目标:基于 CommonJS 标准语法,导入工具属性和方法使用
 */
// 导入
const obj = require('./utils.js')
console.log(obj)
const result = obj.arraySum([5, 1, 2, 3])
console.log(result)

二.ECMAScript标准

CommonJS 规范是 Node.js 环境中默认的,后来官方推出 ECMAScript 标准语法。

1.默认导入导出

导出语法:

javascript 复制代码
export default {
  对外属性名: 模块内私有变量
}

导入语法:

javascript 复制代码
import 变量名 from '模块名或路径'

注意:Node.js 默认只支持 CommonJS 标准语法,如果想要在当前项目环境下使用 ECMAScript 标准语法,请新建 package.json 文件设置

{ type: 'module' } 来进行设置

代码实现:

utils.js:导出

javascript 复制代码
/**
 * 目标:基于 ECMAScript 标准语法,封装属性和方法并"默认"导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 默认导出
export default {
  url: baseURL,
  arraySum: getArraySum
}

index.js:导入

javascript 复制代码
/**
 * 目标:基于 ECMAScript 标准语法,"默认"导入,工具属性和方法使用
 */
// 默认导入
import obj from './utils.js'
console.log(obj)
const result = obj.arraySum([10, 20, 30])
console.log(result)

2.命名导出和导入

export 修饰定义语句

javascript 复制代码
export 修饰定义语句

命名导入语法:

javascript 复制代码
import { 同名变量 } from '模块名或路径'

注意:同名变量指的是模块内导出的变量名

代码示例:

utils.js 导出

javascript 复制代码
/**
 * 目标:基于 ECMAScript 标准语法,封装属性和方法并"命名"导出
 */
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

index.js 导入

javascript 复制代码
/**
 * 目标:基于 ECMAScript 标准语法,"命名"导入,工具属性和方法使用
 */
// 命名导入
import {baseURL, getArraySum} from './utils.js'
console.log(obj)
console.log(baseURL)
console.log(getArraySum)
const result = getArraySum([10, 21, 33])
console.log(result)

与默认导出如何选择:

  • 按需加载,使用命名导出和导入
  • 全部加载,使用默认导出和导入
相关推荐
我是哈哈hh10 分钟前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清32 分钟前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
一枚前端小能手33 分钟前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
晴空雨34 分钟前
React 合成事件原理:从事件委托到 React 17 的重大改进
前端·react.js
魏嗣宗36 分钟前
Node.js 网络编程全解析:从 Socket 到 HTTP,再到流式协议
前端·全栈
pepedd86437 分钟前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae
pepedd8641 小时前
浅谈js拷贝问题-解决拷贝数据难题
前端·javascript·trae
@大迁世界1 小时前
useCallback 的陷阱:当 React Hooks 反而拖了后腿
前端·javascript·react.js·前端框架·ecmascript
跟橙姐学代码1 小时前
学Python别死记硬背,这份“编程生活化笔记”让你少走三年弯路
前端·python
前端缘梦1 小时前
深入理解 Vue 中的虚拟 DOM:原理与实战价值
前端·vue.js·面试