踩坑 Tip

• alias 配置

  • 当仅使用 babel 构建项目的 esm 时 alias 处理很棘手
    • module-alias tsconfig-paths 不该用在其他 npm 模块中使用，因为它会修改默认 require 行为！（应用场景 用于开发最终项目，例如网站、应用程序、一次性 cli 脚本等）
    • babel-plugin-module-resolver 能够解决问题 配置与 webpack 或 vite 的 alias 一样

      // .babelrc.js
      ['babel-plugin-module-resolver', {
        alias: {
          '@': './src'
        }
      }],

    • babel-plugin-tsconfig-paths-module-resolver 可以直接读取 tsconfig.json 并正确设置
  • 当使用 tsc 构建 发出声明文件 并不会转换别名
    • 使用 tsc-alias 对 tsc 处理过没有转换的别名继续处理

• typescript 与 ts-node 一起使用 设置 tsconfig.json 问题

  • 当 tsconfig.json 设置 "module": "ESNext" 执行 ts-node 报错 package.json 加入"type": "module" 改完了又报 unknown file extension .ts

  • 解决方案

• 测试 tree shaking

  • 这 2 种方式都是 tree shaking 有效方式 但是都不能解决副作用的问题（即便你没有引用一个模块其中的副作用代码仍然会被打包进去）

    export { default as xxx } from './xxx' // 或者 import xxx from './xxx'; export { xxx }
    export * from './xxx'

• esm 是打成一个文件好（方便）还是多个文件好呢？

  • 目前看到的 vue antd 都是多个文件（目的 可能是为了更有效的去除副作用？）

• 多个类型包（cjs、esm、umd）是可以复用同一份 ts 类型的 只需要在 package.json 中指定 typings 字段

  • 但是一般对于一些 ui 库允许下面这种引用方式 需要也能使用 ts 的类型 只能每种类型包下都构建一份 ts 类型

    import Button from 'antd/es/button'

• 方便的本地测试 首先明确测试的是构建的产物不是源码

  • 最简单的方式 直接引用 构建好的文件（ts 类型 已经通过每种类型包下都构建一份 ts 类型）

  • 使用 yarn link 自己测自己（还真挺好用的 安装新包不会被"冲掉"）

构建 纯 js library

• babel 用来构建 esm/cjs

• umd 只要一个文件所以使用 rollup（vite）构建

  • 注意 vite 打包用的是 esbuild 配置 babel 不会影响使用

打什么样的包

• 只是在 node esm & cjs

• 只是在 webpack（前端） esm & umd

• 只是在 浏览器 esm & umd （esm 可以直接用于 script 标签 type="module"，umd 可以直接用于 script 标签）