JS模块化中加载的文件名更换

Question

问题描述如今JS主流的组织方式都是模块化开发，但是平常开发中有遇到一种场景：比如在项目中，有一个模块的文件名被更改了，比如：ModuleA.js -> ModuleB.js这样就要导致我要找到每个引入了ModuleA的JS文件都要去做更改，否则会报错：import {xxx} from './ModuleA' -> import {xxx} from './ModuleB'这样工作量很大而且很不方便，而假如用<script>引入的方式的话，则只需要找到script标签引入的地方更改即可，只需更改一处地方。<script src="./ModuleA.js"></script> -> <script src="./ModuleB.js"></script>或者举个更常见的例子：在React开发中，React的组件中都需要有import React, { Component } from "react";如果某天react更名叫做react2了。那我们用到react开发的项目不是得找到所有react组件的js文件去更改成import React, { Component } from "react2";所以想请各位同学指点一下，这种场景应该如何更加优雅地解决？还是这是模块化开发的不方便之处？万分感激!!!

Answer 1

1.你举的import和<script>的例子不具有可比性，import换文件名这种操作对应的是<script>的脚本文件中函数名的更换啊，如果有很多地方用到这个函数，你也是要一个个手动修改的。而你举的<script>的例子对应的更多是app.js/vendor.dll.js这种文件

2.所以这并不是“模块化”开发的坏处，因为传统方式一样存在。

3.为什么这么不方便，因为改文件名本质上就是修改了依赖，如同把jquery改成了zepto，react改成了preact，这么想是不是释然了。

4.目前没见到有通用的解决方案，因为这种操作需要对照旧的引用关系来更改对应文件中的名称。其实只有编辑器/IDE能做到这点，至少目前VS Code是支持的

Answer 2

我觉得你应该去用个智能点的IDE,比如试下WebStorm？ 文件夹改名 文件改名 自定义模块改名 函数改名 参数变量改名这些变更项目里有引用的都会智能更新，节约大把时间，所以就不存在你这个问题了