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的压缩文件）中来解决此问题：

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

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

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

Answer 1

如何动态命名导出

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

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

const {div} = h;