如何用JavaScript正则匹配React项目npm包import语句排除本地导入

正则匹配方案 #

针对未覆盖的三类导入场景，可以使用如下正则：

^import\s+(?:(?:\w+\s*,\s*)?\{\s*[\w\s,]*\s*\}|\w+)\s+from\s+['"]((?:@[\w-]+\/)?[\w.-]+)['"];?\s*$

该正则的匹配逻辑：

• 支持纯默认导入写法，如import axios from 'axios'
• 支持单个/多个具名导入写法，如import { Col, Modal, ModalHeader, Row } from 'reactstrap'
• 支持默认导入+具名导入混合写法，如import React, { useEffect, useState } from 'react'
• 支持带作用域的npm包导入，如import { useLazyQuery } from '@apollo/react-hooks'
• 自动排除以.开头的相对路径导入，不会匹配../../store/actions/actions这类本地模块路径

注意：正则方案存在边界限制，无法适配换行书写的import语句、TS类型导入、import * as XXX from 'xxx'这类命名空间导入场景，复杂场景建议使用AST解析方案。

AST解析方案（准确率100%） #

要覆盖所有合法ES Module导入语法，最可靠的方式是通过AST解析提取导入信息，无需处理复杂的正则边界case，实现步骤如下：

1. 读取目标React文件的源码文本
2. 用JS解析器将源码转换为抽象语法树，开启JSX、ES模块语法支持
3. 遍历语法树中的导入声明节点，提取导入路径
4. 过滤掉以.开头的相对路径，剩余结果就是所有npm包的导入语句

参考实现代码：

const parser = require('@babel/parser');
const fs = require('fs');

// 替换为你要扫描的文件路径
const fileContent = fs.readFileSync('./target-component.jsx', 'utf-8');

// 解析源码为AST
const ast = parser.parse(fileContent, {
  sourceType: 'module',
  plugins: ['jsx']
});

const npmImportList = [];
ast.program.body.forEach(node => {
  if (node.type === 'ImportDeclaration') {
    const importPath = node.source.value;
    // 过滤相对路径的本地模块
    if (!importPath.startsWith('.')) {
      npmImportList.push({
        packageName: importPath,
        importMembers: node.specifiers.map(spec => spec.local.name)
      });
    }
  }
});

console.log(npmImportList);

该方案可以识别所有合法的import写法，不存在正则漏匹配、误匹配的问题，适合批量扫描项目文件的场景。

内容的提问来源于stack exchange，提问作者vikrant