JavaScript如何从index.js批量导入函数并直接调用无需解构引用

根据你使用的模块规范不同，可以用以下两种方案实现一次性导入所有导出函数、直接调用的需求：

CommonJS 环境（Node.js 默认使用） #

1. 先正常在index.js中导出所有自定义函数：

// index.js
function myFunction() {
  console.log('测试函数执行')
}
function otherFunction() {
  console.log('其他函数执行')
}

// 统一导出所有函数
module.exports = {
  myFunction,
  otherFunction
}

2. 在app.js中导入时，把所有导出的内容直接挂载到全局对象：

// app.js
Object.assign(globalThis, require('./index.js'))

// 可以直接调用所有导出的函数，不需要加前缀
myFunction()
otherFunction()

ES Module 环境（浏览器/Node.js 配置"type": "module"时使用） #

1. index.js导出写法：

// index.js
export function myFunction() {
  console.log('测试函数执行')
}
export function otherFunction() {
  console.log('其他函数执行')
}

2. app.js导入写法：

// app.js
import * as allExports from './index.js'
Object.assign(globalThis, allExports)

// 直接调用
myFunction()
otherFunction()

• 该方案会将index.js导出的所有属性挂载到全局对象，需要注意导出的函数命名不要和已有全局变量重名，避免覆盖原有全局属性造成异常
• 如果不想污染全局作用域、仅需要在单个文件内直接调用，JS原生没有更简便的实现方案，只能选择手动解构导入或者临时挂载到当前文件的顶层变量

内容的提问来源于stack exchange，提问作者AHMAD MUSIC