javascript - 如何通过在 JavaScript 项目中移动文件来重构并自动更新引用？

欢迎提供一般提示。我的具体情况是一个 React 应用，用 WebPack 编译，有很多文件。如果我想在项目中移动文件或文件夹，有没有一种好方法可以让引用（例如 import 和 require 语句）自动更新？

使用 Atom 或 VSCode 的解决方案的奖励积分。

NPM 脚本也可以工作。谢谢。

标签： javascriptreactjswebpackrefactoring

这些年来，我使用了一些带有插件和 IDE 的文本编辑器，包括 Atom、VSCode、SublimeText 等，但不断回到 Jetbrains 产品，原因之一是重构功能。

Jetbrains 专用的 JavaScript IDE，Webstorm做得很好，没有任何额外的插件或黑客。

您需要做的就是将文件或文件夹拖放到另一个位置，所有相关导入都将更新（确保在确认弹出窗口中勾选搜索参考）。这适用于es6 import和/或common js require()。

这还不是全部，您可以重命名变量、类、函数名称，无论您喜欢什么，只要确保您通过选择文本来完成，然后右键单击然后重构和重命名（您将在此菜单中看到您可以做更多如果你想）

每当您要确认您的更改时，您可以在弹出窗口中选择“在评论和字符串中搜索”选项，如果您愿意，这真的很酷，因为您也可以使您的文档保持最新。

这个官方文档更深入，但通常如果您执行上述操作，就足够了。

我想如果你没有足够的信心，请启动服务器，使用 (create-react-app 它会在你每次进行更改时重新加载，因为内置了热重载)，如果你的重构出现问题，你会知道马上。

仅供参考，我与 Jetbrains 无关，我只是喜欢该产品。Webstorm 不是免费的（但它非常便宜）——如果您不想付费，请选择 30 天试用版。

更新：

另请注意，此功能支持相对路径和绝对路径以及任何文件扩展名，因此包括.*scss等。