为何在打包工具中导入 Cesium 的 css 失败了？

岭南灯火 2023-03-28 原文

1 问题起因

我使用 vite2 + vanillajs 模板创建 CesiumJS 项目，其中，main.js 是这样的：

import { Viewer } from 'cesium'
import './style.css'
import 'cesium/Source/Widgets/widgets.css'

let viewer
const main = () => {
  const dom = document.getElementById('app')
  viewer = new Viewer(dom)
}

document.addEventListener('DOMContentLoaded', () => {
  main()
})

看起来逻辑完美，思路清晰，没什么特别的疑问点。于是我就吭哧吭哧地运行起 npm script：

pnpm dev

可是，Vite 在控制台给我报了个错：

[vite] Internal server error: Missing "./Source/Widgets/widgets.css" export in "cesium" package

这个问题貌似在各前端框架的模板中是不会出现的，我不确定。也有人在 Webpack 中遇到了这个类似的情况，究其原因，我认为还是 cesium 包的导出有些不完备，见下面第二节的分析。

简单点说，就是 Vite 的内置预构建工具 esbuild 在搜索依赖树时，没有找到 "cesium" 包导出的一个路径为 "./Source/Widgets/widgets.css" 文件。

2 寻找解决方案

可是，当我打开 node_modules/cesium/Source/Widgets/ 目录，widgets.css 文件的确就在那里放着。

于是我打开了谷歌，果不其然找到了类似的 issue：github.com/CesiumGS/cesium issue#9212，我在 2021 年 8 月也跟帖回复了我的情况。

我当时并没有找到解决方案，就暂时跳过了。

后来，有外国朋友跟帖回复，大致原因找到了：

cesium 包的 package.json 没有导出样式文件，主要是 package.json 中的 exports 属性。

于是，我打开官方源码的 package.json，找到对应的部分：

{
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "require": "./index.cjs",
      "import": "./Source/Cesium.js"
    }
  }
}

2.1. 历史原因

众所周知，NodeJS 最先使用的模块化机制是 CommonJS，后来才支持的 ESModule，现在 NodeJS 仍然默认新建的包是 CommonJS 模块的。

外国佬在 NodeJS 的包中允许双模块化，这就容易存在兼容性问题。我们看看最开始是怎么实现双模块化的，这里以默认 ESModule 为模块化方式：

设置 package.json 的 "type": "module"，这样所有的 .js 文件都是 ESM 了
设置 package.json 的 "module": "./dist/esm/index.js"，这个意思是使用 import 语法导入时，ESM 模块将从哪里寻找主文件
设置 package.json 的 "main": "./index.cjs"，这个意思是使用 require 函数导入模块时，CommonJS 的主文件是哪个

后来，随着 ESModule 成为主流标准，NodeJS 改进了上面的配置方式，你仍可以设置 "type": "module" 令当前包的模块化是 ESM，但是对包的多模块化机制的配置则改用了 "exports" 字段，正如上面 cesium 的配置。

我检查了我的 NodeJS 版本：

> node -v
> v16.14.0

显然比较新，那么它应该就是从 "exports" 中读取的导出信息。

2.2. 增加导出

于是，我增加了 "exports" 的导出字段，让打包工具在识别 cesium 包的导出时，可以正确识别 widgets.css 文件。

{
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "require": "./index.cjs",
      "import": "./Source/Cesium.js"
    },
+   "./Source/Widgets/widgets.css": "./Source/Widgets/widgets.css"
  }
}

这样，下面两个导入语句：

import { Viewer } from 'cesium'
import 'cesium/Source/Widgets/widgets.css'

实际上就是：

import { Viewer } from 'cesium/Source/Cesium.js'
import 'cesium/Source/Widgets/widgets.css'

2.3. 耍个花招

我觉得这样导入 css 文件还是太长，不妨在 "exports" 中给它改个名：

{
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "require": "./index.cjs",
      "import": "./Source/Cesium.js"
    },
+   "./index.css": "./Source/Widgets/widgets.css"
  }
}

然后就可以愉快地使用短路径导入了：

import { Viewer } from 'cesium'
import 'cesium/index.css'

事实上，package.json 中的这个 exports 属性，就起到类似导出别名的作用，其中 "." 就相当于包的根路径。

3 类型提示是哪来的

考虑这样导入 cesium 各个 API：

import {
  Viewer,
  Cartesian3,
  Camera
} from 'cesium'

当你使用这些类的时候，会得到不错的类型提示。回顾前面的内容，其实从 "cesium" 导入子模块，实际上是从 "cesium/Source/Cesium.js" 文件导入的，而这个文件的旁边就有一个 "Cesium.d.ts" 文件，它就起类型提示的作用。

这个类型声明文件是 Cesium 使用 gulp 打包时输出的。

说了这么多，根本原因还是 JavaScript 的历史包袱导致的各种问题，而且官方也暂时没有修改 package.json 中 exports 的计划，如果你有报这个错误，那么你仅仅需要按我上面的方式稍作修改即可。

中导为何 code cesium package 企业信息化

有关为何在打包工具中导入 Cesium 的 css 失败了？的更多相关文章

ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby - 即使失败也继续进行多主机测试 - 2
我已经构建了一些serverspec代码来在多个主机上运行一组测试。问题是当任何测试失败时，测试会在当前主机停止。即使测试失败，我也希望它继续在所有主机上运行。Rakefile:namespace:specdotask:all=>hosts.map{|h|'spec:'+h.split('.')[0]}hosts.eachdo|host|begindesc"Runserverspecto#{host}"RSpec::Core::RakeTask.new(host)do|t|ENV['TARGET_HOST']=hostt.pattern="spec/cfengine3/*_spec.r
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
postman接口测试工具-基础使用教程 - 2
1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，
ruby-on-rails - 创建 ruby 数据库时惰性符号绑定(bind)失败 - 2
我正在尝试在Rails上安装ruby，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf
ruby - 正则表达式在哪个位置失败？ - 2
我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束
ruby - 使用 rbenv 和 ruby-build 构建 ruby 失败，出现 undefined symbol : SSLv2_method - 2
我正在尝试在配备ARMv7处理器的SynologyDS215j上安装ruby2.2.4或2.3.0。我用了optware-ng安装gcc、make、openssl、openssl-dev和zlib。我根据README中的说明安装了rbenv(版本1.0.0-19-g29b4da7)和ruby-build插件。.这些是随optware-ng安装的软件包及其版本binutils-2.25.1-1gcc-5.3.0-6gconv-modules-2.21-3glibc-opt-2.21-4libc-dev-2.21-1libgmp-6.0.0a-1libmpc-1.0.2-1libm
ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2
我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。最佳答案虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功