Question

这是一个常规问题。我是ES6的新手，但我正在尝试使用模块系统。从单个文件导出多个函数或导出包含这些函数的单个对象是首选/更常见的。

示例：

utils.js

export function add(num1, num2) {
  return num1 + num2;
}

export function minus(num1, num2) {
  return num1 - num2;
}

并像这样使用它：

import {add, minus} from 'utils.js';

vs

utils.js

const utils = {
  add: (num1, num2) => {
    return num1 + num2;
  },

  minus: (num1, num2) => {
    return num1 - num2;
  }
}

export default utils;

在包含50-100个函数的utils文件中，第二种方式似乎是明显的赢家。但是对我来说只是感觉不对劲，我不知道为什么。

Answer 1

展望未来，导出多个功能可能会更好，因为tree shaking允许module bundlers根据是否已导入死代码来消除死代码。

如果导出一个大型对象，则无法始终使用静态分析来确定需要保留哪些功能以及哪些功能可以安全丢弃。

如果导出多个命名函数，则模块捆绑器可以分析AST，然后将您实际导入的函数安全地列入白名单。

Answer 2

如果您有通过utils文件公开的50-100个函数，那么我会说使用命名的导出

export function add() {}

因为否则每次导入utils都会导入所有函数。这可能是你有时想要的，但最有可能的是，对于任何给定的模块，只有少数可用的函数。如果你想要所有的函数，那么简单的import * as utils from './utils';就足够了。

然而，如果你想要安全防范它，没有什么不能说你可以使用这两种模式。

export function add() {};

const utils = {
   add: add
};
export default utils;

以上内容既有效也很常见。

在使用export default开发库时，只记得Babel 6.x实际上会生成一个包含default属性的对象（正确方法），导出的对象将附加到该属性上。

import utils from './utils';

console.log(utils);
// { default: yourUtilsObject }

最好导出包含函数的对象，或者只导出ES6中的多个函数（是否存在约定？）

2 个答案: