parcel报错Error: Expected content key de1e4a02ec63c4eb to exist


字数:310 阅读时长:1分钟 阅读:85

使用 Parcel 编译运行 TypeScript 出现报错:Error: Expected content key de1e4a02ec63c4eb to exist

Parcel TypeScript

一、使用场景

在页面上直接以 <script src="./index.ts" ></script> 的形式导入 TS 文件,可以正常运行。
但是,如果在 index.ts 中用 import 的形式又导入了其他 TS ,则会出现上边的报错。

  • 目录结构
1
2
3
4
5
6
7
8
.parcel-cache/
dist/
01.ts
02.ts
index.ts
index.html
package.json
tsconfig.json
  • index.ts
1
2
import './01.ts'
import './02.ts'
  • index.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang='zh'>
<head>
<meta charset='UTF-8'>
<title>TS 测试入口</title>
</head>
<body>

<script src='index.ts'></script>
</body>
</html>
  • 运行
1
parcel index.html

将会得到上述错误。

二、问题原因

  1. 由于 parcel 运行后会生成缓存文件,也就是上边出现的 .parcel-cachedist 目录,会影响浏览器运行。
  2. index.ts 中使用了 import 语法,浏览器默认是不支持的。

三、问题解决

  1. 删除 .parcel-cachedist 目录
  2. 修改 index.htmlindex.ts 的导入模式,增加 type='module' 属性,让浏览器识别 import 语法
1
<script src='index.ts' type='module'></script>

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2023-06-30
最后更新: 2023-07-19
本文标题: parcel报错Error: Expected content key de1e4a02ec63c4eb to exist
本文链接: https://www.tiven.cn/p/e1b521be/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!