es2015 模块 - 如何动态命名导出

Question

在此示例中，react-hyperscript 被柯里化并公开了一组默认函数，因此 h('div', props, children) 变为 div(props, children)。

import hyperscript from 'react-hyperscript';
import {curry} from 'lodash';

const isString = v => typeof v === 'string' && v.length > 0;
const isSelector = v => isString(v) && (v[0] === '.' || v[0] === '#');

const h = curry(
  (tagName, first, ...rest) =>
    isString(tagName) && isSelector(first) ?
      hyperscript(tagName + first, ...rest) :
      hyperscript(tagName, first, ...rest)
);

const TAG_NAMES = [
  'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', // ...
];

TAG_NAMES.forEach(tagName =>
  Object.defineProperty(h, tagName, {
    value: h(tagName),
    writable: false,
  })
);

export default h;

在另一个模块中：

import h, {div} from 'lib/h';

console.log(
  h,        // h
  div,      // undefined <- problem!
  h('div'), // div
  h.div     // div
)

这可以通过将其附加到示例中来解决（来自 lodash 的 zip）：

const {
  a, abbr, address, area, // ...
} = zip(
  TAG_NAMES,
  TAG_NAMES.map(h)
)

export {
  a, abbr, address, area, // ...
}

但是这个解决方案不是很优雅，有人知道更好的选择吗？

Answer 1

如何动态命名导出

你不能。 import 和 export 语句是专门设计的这种方式，因为它们必须是静态可分析的，即导入和导出名称必须在代码执行之前知道。

如果您需要动态的东西，那么就做您已经在做的事情：导出“地图”（或对象）。人们仍然可以使用解构来获得他们想要的东西：

const {div} = h;