如何将一个非模块化的项目转为模块化项目？

最近写一个行业关系图的组件，写的时候我是直接拆分为几个JS文件，然后在html页面中引入这几个文件，没有采用模块化的方法。开发到后期时，准备处理打包相关的事情了，然后就得将这些程序转为模块化的形式。这个过程耗费了我不少时间，因此这里记录下，用于今后参考。

全局数据模块

前端开发是数据驱动的工种，因此务必先处理数据。

考虑到组件一般都会有数据、配置等信息，而这些信息是需要在不同模块之间传递的，因此首先得创建一个全局数据模块，挂载上各种数据，供其他模块使用。

由于JS对象是引用传递的，因此只需在各个模块中import这个数据模块即可，数据的变更会通过引用，作用到这个模块上，全局唯一。

我一开始是这样写的：

1
2
3
4
5
6
export default {
    relationships : [],
    nodes: [],
    nodeMap: {},
    options: {}
}

然后发现开发阶段没有问题，但是在发布阶段，用webpack打包压缩JS后，程序就跑不起来了，排查发现是获取的这个数据对象的各个属性，都是undefined，也就是说该数据对象并没有全局传递。webpack编译打包的过程中，控制台也会输入类似这样的黄色报警信息：

1
2
3
WARNING in ./src/draw.js 225:15-27
"export 'options' (imported as 'data') was not found in './data'
 @ ./src/index.js

网上找到了一个处理方案，然后根据该方案，改为如下方式就可以了：

1
2
3
4
5
6
7
8
9
10
11
12
let relationships = [];
let nodes = [];
let nodeMap = {};
let options = {}


export {
    relationships,
    nodes,
    nodeMap,
    options,
}

但是这样在开发模式下，又跑不起来了。

回到最初的需求，我其实是想要一个能够全局传递的唯一对象，因此考虑下通过单例模式来实现。

函数快速导出导入

我之前的代码，都是以function形式定义的，如果全部改为class，风险太大，因此我考虑先仍然使用function的形式，导出给其他模块使用。

function比较多，可以通过脚本命令帮助生成import的内容：

1
cat draw.js |grep function|awk '{print $3}'|awk -F '(' '{print $1","}'

将输出复制到需要用到这些函数的模块文件中进行import：

1
2
3
4
5
6
7
8
9
10
11
import {
    findNotRelativeNodes,
    findNotRelativeRelationships,
    findRelativeNodes,
    findRelativeRelationships,
    formatNodesToMap,
    computeDepth,
    computeNumberOfChildren,
    getDisplayRelationshipsById,
    getDisplayNodesById
} from './dataParser';

这样比手动一个个复制快多了。

拆分数据和渲染

渲染函数，一定要将所需的数据和配置、作图所依附的画布元素，都以参数的形式传入进去，否则会导致很高的耦合度，程序难以复用。

比如画箭头的函数，一开始是这样的：

1
2
3
4
5
export function drawArrows(relationships, nodes) {
    let container = getContainer();

    // 下面是画图的代码，省略
}

是在代码逻辑中去获取作图的画布容器，这样如果我想换个画布，就很麻烦。

因此需要改为参数传入的形式：

1
2
3
4
export function drawArrows(container, relationships, nodes) {

    // 下面是画图的代码，省略
}

暴露对外的全局类

组件一般都会对外暴露一个全局的类，比如ECharts这种。

我目前是参考其他同事的方式，直接将最终的类挂载到window对象上的：

1
window.Industry = Industry

这个Industry类就不需要封装为模块了。

打包后的调试

webpack打包后，全部js成为压缩后的一个文件了。

此时可以通过sourceMap调试，也可以通过debugger进行调试。

souceMap：https://blog.csdn.net/qq_40126542/article/details/81097414