是否可以使用正则表达式将 javascript 要求替换为 ES6 导入？答案

【问题标题】：Is it possible to replace javascript require with ES6 import using a regex?是否可以使用正则表达式将 javascript 要求替换为 ES6 导入？
【发布时间】：2021-09-27 08:28:52
【问题描述】：

我目前正在将一些使用 require 函数模块化的 javascript 转换为 ES6 import 语句。

比如我要转换

var dom = require("./lib/dom");
var event = require("./event");

以下-

import * as dom from "./lib/dom.js";
import * as event from "./event.js";

我尝试使用正向预测来匹配变量名（dom 和 event）

\w+(?=\s+=\s+require\()

但是，当我使用匹配替换来构建 import 语句时，它包含变量名称后面的文本 -

import * from $&

变成-

var import * from dom = require("./lib/dom");
var import * from event = require("./event");

这可以通过regular expression 完成吗？如果有，怎么做？

【问题讨论】：

通常你可以使用几个 helper CLI 将 cjs 转换为 esm
我不确定是否可以使用正则表达式，但如果可能的话它应该很复杂。 var dom = require("./lib/dom"); 几乎可以出现在代码中的任何位置，但 import * as dom from "./lib/dom.js"; 不能。正则表达式必须检查当前上下文。
@tmhao2005 我已经尝试了一些工具，例如cjs-to-es6，但在某些情况下它们失败了，可能是因为original code是使用AMD Simplified CommonJS wrapping模块化的。我更愿意以交互方式检查每个替换。

标签： javascript regex

【解决方案1】：

这似乎是一个解决方案 -

//require('req_name')"
file_in.contents = file_in.contents.replace(new RegExp(/\nrequire\("(?<req_path>.*\/)(?<req_name>.*)"\)/, "g"), '\nimport * as $<req_name> from "$<req_path>$<req_name>.js"');

//var var_name = require('module_name').member"
file_in.contents = file_in.contents.replace(new RegExp(/\nvar\s+(?<var_name>\w+)\s*=\s*require\("(?<module_name>.*)"\)\.(?<member_name>\w+)/, "g"), '\nimport { $<member_name> as $<var_name> } from "$<module_name>.js"');

//var var_name = require('module_name')
file_in.contents = file_in.contents.replace(new RegExp(/\nvar\s+(?<var_name>\w+)\s*=\s*require\("(?<module_name>.*)"\)/, "g"), '\nimport * as $<var_name> from "$<module_name>.js"');

file_contents 之前 -

require("ace/lib/fixoldbrowsers");
var mockdom = require("../test/mockdom");
var AsyncTest = require("asyncjs").test;
var async = require("asyncjs");

file_contents 之后-

import * as fixoldbrowsers from "ace/lib/fixoldbrowsers.js";
import * as mockdom from "../test/mockdom.js";
import { test as AsyncTest } from "asyncjs.js";
import * as async from "asyncjs.js";

【讨论】：

【解决方案2】：

var replaceRequireWithES6 = (fileContent) => {
  const requireRegExp = /(var|let|const)\s+([a-zA-Z0-9_]+)\s*=\s*require\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
  const requireRegExp2 = /(import)\s+([a-zA-Z0-9_]+)\s*=\s*require\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
  let match;
  let match2;
  let newFileContent = fileContent;
  while (match = requireRegExp.exec(newFileContent)) {
    newFileContent = newFileContent.replace(match[0], `import ${match[2]} from "${match[3]}";`);
  }
  while (match2 = requireRegExp2.exec(newFileContent)) {
    newFileContent = newFileContent.replace(match2[0], `import ${match2[2]} from "${match2[3]}";`);
  }
  return newFileContent;
}

var fileContent = `var dom = require("./lib/dom");\nvar event = require("./event");`

console.log(replaceRequireWithES6(fileContent))

【讨论】：

您的代码如何检查require 是否在函数内部？ function f() { const a = require('something'); } 有效。 function f() { import a from "something"; } 无效。对于多个其他上下文也是如此。