如何使用 ES6 模块语法（破坏）导入属性？答案

【问题标题】：How to import into properties using ES6 module syntax (destructing)?如何使用 ES6 模块语法（破坏）导入属性？
【发布时间】：2015-08-20 17:30:00
【问题描述】：

import utilityRemove from 'lodash/array/remove';
import utilityAssign from 'lodash/object/assign';
import utilityRandom from 'lodash/number/random';
import utilityFind from 'lodash/collection/find';
import utilityWhere from 'lodash/collection/where';

let util;

util = {};

util.remove = utilityRemove;
util.assign = utilityAssign;
util.random = utilityRandom;
util.find = utilityFind;
util.where = utilityWhere;

使用 ES6 模块系统是否有更好的方法来完成上述工作？

【问题讨论】：

我真的很想知道你为什么不做import util from 'lodash' 或import {remove, assign, random, find, where} from 'lodash'？
两种方法都会导入整个库 (600KB)。导入单个模块加起来只有大约 80KB。
您是重新导出util 还是在同一个文件中使用它。如果您要重新导出它，那么您应该使用 ES6 语法来执行此操作并完全跳过创建对象。
只需使用next-generation bundler 然后:-)
@Bergi 太好了。你应该联系 Babel 的人，如果你还没有的话。

标签： javascript ecmascript-6

【解决方案1】：

如果这些是您模块中唯一的符号，我会缩短名称并使用新的对象速记来做：

import remove from 'lodash/array/remove';
import assign from 'lodash/object/assign';
import random from 'lodash/number/random';
import find from 'lodash/collection/find';
import where from 'lodash/collection/where';

let util = {
  remove,
  assign,
  random,
  find,
  where
};

如果这可能导致冲突，您可以考虑将此部分移至其自己的模块中。能够在测试时替换 lodash 方法可能很有用。

由于每个符号都来自不同的模块，因此您不能合并导入，除非 lodash 为此提供了一个合并的导入模块。

如果你只是导出符号而不使用它，你也可以考虑this syntax：

export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';

对于任何导入和使用您的模块的人来说，这将显示为：

import {remove, assign} from 'your-module';

【讨论】：

这不起作用，因为有一个内置的全局变量window.find。如果你使用 ESLint 并启用了“no-redeclare”规则，则会产生错误。
然后你可以只更改一个导入：import loFind from ...; let util = {remove, assign, random, find: loFind, ...};
我意识到这是一种选择，但我更多地将其作为设计问题提出，而不是其他任何事情。鉴于当前的 ES 标准，我不希望有一个令人满意的答案。很遗憾，这样的事情是不可能的，gist.github.com/gajus/d1fe16bc9605799cce5e。
@GajusKuizinas：“我提出这个问题更多是作为一个设计问题。鉴于当前的 ES 标准，我不希望得到一个令人满意的答案。” 然后 Stack Overflow不适合进行这样的讨论。
@GajusKuizinas: “如果你使用 ESLint 并启用了“no-redeclare”规则，它会产生错误。” 那么也许你想禁用该规则该文件/行，如果它是有意覆盖的话。

【解决方案2】：

您可以在 utils 模块中执行此操作：

//utils.js

export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';
export random from 'lodash/number/random';
export find from 'lodash/collection/find';
export where from 'lodash/collection/where';

并像这样使用它：

import * as util from './utils';

...

util.random();

【讨论】：