使用 webpack 在 monaco-editor 包中构建字体文件

Posted 2023-03-13

【中文标题】使用 webpack 在 monaco-editor 包中构建字体文件

【英文标题】：Build font file within monaco-editor package with webpack

【发布时间】：2021-06-25 18:12:22

【问题描述】：

我正在尝试将一个依赖于monaco-editor 模块的包集成到我们的项目中。

我们项目的一些细节：

从create-react-app 项目中退出 语言：打字稿 (v3.9) 构建系统：Webpack (v4.44) 摩纳哥编辑器 (v0.22.3)

我们项目的依赖如下所示：

Project A
   |--> EditorPackage
            |--> MonacoEditor (v0.22.3)

我们还依靠 Monaco 编辑器 webpack plugin 在我们的项目中注册特定语言并正确配置网络工作者。当我尝试使用 webpack 构建我们的项目时，我突然开始看到这个错误：

.ttf 是封装在 monaco-editor 源中的字体文件，我为此找到了相关的issue。我按照docs 中的指导，通过修改我们的 webpack 配置添加了正确打包.ttf 文件的规则：

  test: /\.ttf$/,
  loader: require.resolve("file-loader")

我还尝试将 .ttf 添加到 webpack 的 extensions 配置中。我似乎仍然遇到同样的错误。我认为这可能是由于我们通过上面强调的EditorPackage 间接依赖 MonacoEditor。

关于如何在此处正确解析和解析.ttf 文件的任何想法？

【参考方案1】：

我看到的错误是从file-loader 插件发出的。随着 webpack 4 的升级，在此 issue 的 Incompatible Loaders 部分中突出显示了加载程序的一些重大更改。

根据该问题的讨论，该问题有两种解决方案：

解决方法 - 在 webpack 配置中的 file-loader 插件中添加 context 选项：

const fileLoader = 
  loader: require.resolve("file-loader"),
  //... other config
  options: 
    context: process.cwd() // this fixes the error
  
;

将 file-loader 升级到 v 1.1.6 或更高版本。 参考：changelog，文件加载器issue

希望对遇到类似问题的其他人有所帮助。