如何明确导入但保留前缀语法？答案

【问题标题】：How to be explicit about imports but keep prefix syntax?如何明确导入但保留前缀语法？
【发布时间】：2021-12-15 05:04:03
【问题描述】：

我读到hereimport * as blah from 'blah' 不是最好的主意，因为它会导入所有内容，这会使您的 JS 文件膨胀。我猜是因为没有输入 Javascript，所以未使用的函数很难优化掉。

首先，这是真的吗，还是我不应该担心，因为“webpack”（我认为这是构建我的 React 应用程序的东西）只会删除所有未使用的函数？

其次，如果我真的应该避免import * as blah from 'blah'，我该如何更改它以便只导入我需要的函数而不重构我的所有代码？我宁愿保留blah.??? 语法，但import { alice, bob } as blah from 'blah' 不起作用，import { alice, bob } from 'blah' 破坏了我之前引用blah.alice 但现在只是更改为仅alice 的所有代码（我实际上更喜欢这个函数集合的前缀语法）。

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

我能想到的最好的事情是制作你自己的对象并确保它与导入保持同步

// blah.js
const alice = () => "alice";
const bob = () => "bob";
const charlie = () => "charlie";

export { alice, bob, charlie };

// index.js
import { alice, bob } from "./blah";
const blah = { alice, bob };
// Even better, do this:
// const blah = Object.freeze({ alice, bob });
// to avoid accidentally rewriting the methods

console.log(blah.alice());
console.log(blah.bob());

您可以在CodeSandbox here 中看到此功能

这绝对是最简单的解决方案，虽然可能不是最好的。但是，它确实得到了预期的结果。

【讨论】：