如何导入IIFE版本的模块？

Question

我有一个反应/下一个项目。我正在努力

import '@solidity/parser'

此模块有cjs（节点）版本和iife（浏览器）版本。

每当我使用

import '@solidity/parser'

时，我都会收到错误：

Module not found: Can't resolve 'module'

（是的，它正在寻找名为“module”的模块）

因为浏览器正在加载

node_modules/@solidity-parser/parser/dist/index.cjs.js

，但我需要

node_modules/@solidity-parser/parser/dist/index.iife.js

（iife而不是cjs）

当我使用脚本标签时，

iife 版本可以工作，但我看不到模块中的类型信息。有没有办法选择 iife 版本，或者我可以使用脚本标记，但如何导入类型信息而不出现此错误？

Answer 1

要在 React/Next.js 中导入 IIFE 模块，请绕过默认的 CommonJS (CJS) 加载。方法如下：

Next.js 的 Webpack 设置

要将 Next.js 中的 IIFE 模块与 Webpack 一起使用，请在 next.config.js 中添加自定义配置。

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.alias['@solidity/parser'] = require.resolve('@solidity/parser/dist/index.iife.js');
    }
    return config;
  },
};

手动导入

另一种方法是从node_modules目录中的路径手动导入IIFE文件：

import '@solidity/parser/dist/index.iife.js';

使用带有类型信息的脚本标签

如果您决定使用脚本标记来包含 IIFE 版本并且仍然希望从类型信息中受益，您可以尝试以下操作：

包含脚本：将 IIFE 脚本包含在 HTML 中（或 Next.js

_document.js

文件中）。

类型声明：在您声明模块及其类型的项目中创建类型声明文件（例如，

solidity-parser.d.ts

）。您可以手动编写这些类型，或者如果可用，从模块的类型定义中复制它们。

// solidity-parser.d.ts
declare module '@solidity/parser' {
  // Type declarations here
}

使用全局变量：由于 script 标签将使模块可用作全局变量，因此您可以直接在 JavaScript/TypeScript 文件中使用它。类型声明文件将帮助您的 IDE 和 TypeScript 编译器理解类型。