如何在不导入外部模块的情况下配置 Webpack 进行构建？

【问题标题】：How to configure Webpack to build without importing an external module?如何在不导入外部模块的情况下配置 Webpack 进行构建？
【发布时间】：2021-12-23 17:35:03
【问题描述】：

我有一个第三方库需要在项目ts代码中使用，使用HTML中的CDN路径添加到应用程序中。而这个库正在导出一个窗口变量，在代码中使用。

该软件包不能作为 npm 模块使用。运行 webpack 构建时失败并显示以下错误消息： error TS2304: Cannot find name 'CUSTOM_WINDOW_VARIABLE'.

我在 webpackconfig.js 文件中添加了这个名称：

    externals: {
      CUSTOM_WINDOW_VARIABLE: "CUSTOM_WINDOW_VARIABLE",
    },

但仍然出现同样的错误。

如何告诉 webpack 在构建时忽略这些全局变量。或者将它们从CUSTOM_WINDOW_VARIABLE 转换为window.CUSTOM_WINDOW_VARIABLE。

【问题讨论】：

标签： javascript typescript webpack

【解决方案1】：

据我所知，您的问题根本与webpack 无关。这个问题很可能是从ts-loader 引发的，它使用tsc 编译器你的tsx? 文件，所以为了解决这个问题，你可能需要为window 上可用的全局值定义类型，步骤如下：

创建您的项目键入目录和文件types/global.d.ts（您可以随意命名，随意使用我建议的名称，不知道如何命名），内容如下：

// global.d.ts

// You can define your own type by replacing with the exact type
declare const CUSTOM_WINDOW_VARIABLE: any;

通过添加到 include 配置选项，确保在大多数情况下位于 repo 根目录的 tsconfig.json 包含您的 types 目录：

// tsconfig.json
{
  "include": ["types", ...]
}

希望它适用于您的情况

PS：如果你的库不是importexternals，基本上你不必在webpack.config文件中配置externals属性

【讨论】：