如何在 JS/React 中导出和导入自定义助手？

Question

任务：

所以，我不想每次都输入console。
我想导入一些 shorthand，例如--

log('hi') 等同于 console.log('hi')

试用案例：

这是我目前的工作。
我想使用 log, warn, error, info 的 shorthand 来对应控制台功能。
我希望这看起来不是完全糟糕的做法，但我愿意倾听。

问题：

我很困惑如何导出和导入这些以便使用所需的符号。

接受所有建议。
请提出建议。
谢谢。

log = (arg, ...argv) => console.log(arg, ...argv)
err = (arg, ...argv) => console.error(arg, ...argv)
error = (arg, ...argv) => console.error(arg, ...argv)
info = (arg, ...argv) => console.info(arg, ...argv)
warn = (arg, ...argv) => console.warn(arg, ...argv)

// how to export? should this be a class?

Answer 1

是的，你可以 shorthand。

创建文件 ex : log.js 具有以下功能。

export const log = (arg, ...argv) => {
    console.log(arg, ...argv)
}
export const err  = (arg, ...argv) => {
  console.error(arg, ...argv)
} 
export const error   = (arg, ...argv) => {
   console.error(arg, ...argv)
}

export const info   = (arg, ...argv) => {
  console.info(arg, ...argv)
}

export const warn   = (arg, ...argv) => {
   console.warn(arg, ...argv)
}

稍后您只需将这些功能导入到您要使用的其他组件中即可。

import {log, err, error, info, warn} from './log'; //path may be different

然后随心所欲地调用函数。

log('hi', [1,2,3]);
err('hi', [1,2,3]);
error('hi', [1,2,3]);
info('hi', [1,2,3]);
warn('hi', [1,2,3]);

Answer 2

ES6 中导出函数的一般关键字是export（自定义导出函数文件）

export const functionName = (arg, ...argv) => {
   console.log(arg, ...argv)
}

在 ES6 中导入函数的一般关键字是 import（自定义导入函数文件）

import { functionName } from './export_function_file';

如何在 JS/React 中导出和导入自定义助手？

How to export & import custom helpers in JS/React?

javascript

logging

console.log

reactjs