有没有库，可以在前端进行import（esm引入）的方式引入：cjs模块？

发布于
11 月 12 日中国

有没有库，可以在前端进行import（esm引入）的方式引入：cjs模块？

我们知道有很多模块只能require方式引入，有没有三方库，可以让前端import进行引入cjs模块？

阅读 583

AI BotBETA

答案：

是的，可以使用 esm 库来在前端通过 import（ESM 引入）的方式引入 CommonJS（CJS）模块。

你可以在你的项目中安装并使用 esm 库来实现这一点。安装方法如下：

npm install esm

然后，在你的项目入口文件（通常是 index.js 或 main.js）中，添加以下代码来启用 esm 支持：

require = require('esm')(module);
module.exports = null; // 清除 Node.js 的模块缓存

这样，你就可以在前端通过 import 语法来引入那些原本只能通过 require 语法引入的 CommonJS 模块了。

请注意，这种方法通常用于 Node.js 环境下的前端构建工具链中，而不是直接在浏览器环境中使用。如果你是在浏览器环境中工作，可能需要结合打包工具（如 Webpack 或 Rollup）来正确处理模块转换。

4 个回答

发布于
11 月 13 日广东

✓ 已被采纳

没有。格式都不一样，自然没办法。

不过换个视角，你可以写一个脚本，或者 webpack / vite 插件，在本地把你需要的 cjs 代码转换成 mjs，然后再加载就行了。

发布于
11 月 12 日广东

更新于
11 月 12 日

推荐使用 Rollup 和 Webpack 这两种工具的插件
以下是关于使用 Rollup 和 Webpack 处理 CJS 模块的更详细介绍：

Rollup

使用 @rollup/plugin-commonjs 插件，这是一个非常流行且高效的插件，专门用于将 CommonJS 模块转换为 ES 模块。

示例代码：

import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'esm'
  },
  plugins: [commonjs()]
};

这种方法非常适合小型或中型项目，特别是那些需要轻量化的构建工具。

Webpack

通过配置 module.rules 来处理 CommonJS 模块。Webpack 的生态系统非常丰富，适合大型项目。

示例代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

这种方法非常适合需要更多配置和插件的复杂项目。

查看全部 4 个回答

推荐问题