Jest + Ts + EsModule + Js

在node环境中,js是否可用 es 语法(import)是与 package.json type 字段强相关的,虽然不知道为什么这么设计,但就是这么个情况。
但是,现在很多包,是采用,es,common 两种输出方式的,也就是在 package.json 中的 main 和 module 分别导出 es,和 common 的入口。这就导致了,使用者是可以直接通过 es 导入,引入 具有 es 语法语句的 代码块的。
image.png
然后 node 只承认 type 为 module 的 node_modules 的 js 代码块中的 es 语法语句有效(即使 node 其实是可以执行 es 语句的)。如果 type 不为 module,会直接抛错。
所以,在 node 的执行环境中,如果从 es 导出中引入的内容,需要 babel 做转换,转换为 commonjs。
所以常见的保留 ts 类型检查,又支持 正常执行的情况,需要对 ts 内容做正常的 ts-jest 编译处理,对 node_modules 中的异常内容(大多引自 es),做额外的 babel 编译处理。
例:
image.png
可以看到,出现了 es 语法语句,来自 es 文件夹,需要 babel 对其做额外处理:
添加配置
https://stackoverflow.com/questions/42260218/jest-setup-syntaxerror-unexpected-token-export
有其他的内容,用 | 分隔即可

  1. {
  2. transformIgnorePatterns: [
  3. '<rootDir>/node_modules/(?!(@babel|antd))',
  4. ],
  5. }

所以按照目前的情况,如果有从 node_modules 中引入 带 esmodule 语句的 js 文件,就无法单独使用 ts-jest 做测试环境编译,需要配合 babel-jest 来处理 js 文件。虽然很繁琐,但这是最优解。

@umijs/father

babel / rollup

father 的 babel 打包模式,自行注册 babel transform,通过自行读取文件目录生成 stream,一个个进行 babel 处理,所以仅可用于小型 纯js文件 项目的打包,实际应用场景不多。相当于对工具函数做快速打包操作。
rollup 则是基于 rollup 生态的集成,小 webpack,目前来看进行基本的整合包问题不大。