Question

任务：

因此，我不想每次都想输入 console 。
我想输入一些速记，例如-

log('hi') 与 console.log('hi')

已尝试的情况：

这是我到目前为止的工作。
我想将 log, warn, error, info 的缩写用于相应的控制台功能。
我希望这似乎不是完全不好的做法，但我愿意听。

问题：

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

打开所有建议。
请提出建议。
谢谢。

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

是的，您可以简写。

使用以下功能创建文件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中导出和导入自定义帮助程序？

2 个答案: