如何在VSCode等工具中批量将项目CJS文件重构为ES6模块？

VSCode内置功能实现 #

这是最不需要额外依赖的方案，操作步骤如下：

• 确认VSCode已安装官方JavaScript和TypeScript语言服务插件（默认预装），将整个项目文件夹在VSCode中打开
• 按Ctrl+Shift+P（Mac系统为Cmd+Shift+P）调出命令面板，输入「首选项：打开设置(JSON)」，添加以下配置开启重构提示：

{
  "javascript.suggestionActions.enabled": true,
  "typescript.suggestionActions.enabled": true
}

• 如果项目识别异常，可在根目录新增jsconfig.json文件配置模块解析规则：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext"
  },
  "exclude": ["node_modules"]
}

• 再次调出命令面板，根据项目语言选择「JavaScript: 重构所有文件」或「TypeScript: 重构所有文件」，在弹出的可选重构列表中勾选「转换为ES6导入」，确认后即可完成全项目批量转换。

VSCode插件方案（ESLint自动修复） #

如果内置重构功能覆盖场景不足，可以配合ESLint实现更精准的转换：

• 项目安装依赖：npm install eslint eslint-plugin-import --save-dev
• 项目根目录新增.eslintrc.js配置文件：

module.exports = {
  env: {
    node: true,
    es6: true
  },
  plugins: ["import"],
  rules: {
    "import/no-commonjs": "error"
  }
}

• 调出命令面板输入「ESLint: 修复所有可自动修复的问题」，等待运行完成即可。

通用自动化方案（不依赖编辑器） #

jscodeshift语法树转换（推荐大型项目使用） #

基于AST语法树转换，准确率最高，几乎可以覆盖所有合法的CJS写法：

• 全局安装工具：npm install -g jscodeshift 5to6-codemod
• 执行批量转换命令（以src目录下所有js文件为例）：
  jscodeshift -t $(npm root -g)/5to6-codemod/transforms/cjs.js ./src/**/*.js
  该工具会自动处理：
• 普通引入const pkg = require('pkg')转import pkg from 'pkg'
• 解构引入const { method } = require('pkg')转import { method } from 'pkg'
• 导出语句module.exports = xxx转export default xxx、exports.xxx = xxx转export const xxx = xxx

正则快速替换（适合小型简单项目） #

如果项目中CJS写法非常统一，没有动态require、条件引入等复杂逻辑，可以用正则快速替换：

• Linux/Mac shell命令：
  find ./src -name "*.js" -exec sed -i '' 's/const \(.*\) = require("\(.*\)")/import \1 from "\2"/g' {} +
  注意：该方案容错率低，仅适合结构简单的项目，使用前务必备份代码。

Vim编辑器批量转换方案 #

• 打开目标目录下所有js文件：vim ./src/**/*.js
• 执行批量替换并自动保存：
  :argdo %s/const \(.*\) = require("\(.*\)")/import \1 from "\2"/g | update

重要提示：所有批量转换操作执行前，请务必将当前代码提交到版本仓库，避免转换错误导致代码丢失。转换完成后需要针对动态引入、条件加载等特殊逻辑做针对性测试，避免业务逻辑出错。

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