何时捆绑 Typescript 包以及何时使用 tsc?

Guy*_*Guy 5 rollup npm typescript gdi-cms

据我所知,在发布 Typescript NPM 包(库,而不是客户端)时,我有两个常规选择:

1.使用Typescript's编译器

要么运行:

tsc
Run Code Online (Sandbox Code Playgroud)

tsconfig.json定义outDir

{
    "compilerOptions": {
        ...
        "outDir": "dist",
    },
    "exclude": ["dist/**"]
}
Run Code Online (Sandbox Code Playgroud)

输出将是multiplejavascript 文件,一切都会按预期工作。

- dist
    - dir/file1.js
    - dir/file2.js
    - index.js
Run Code Online (Sandbox Code Playgroud)

2. 使用Rollup

使用以下命令将所有文件加入到一个包中rollup

tsc
Run Code Online (Sandbox Code Playgroud)

输出将是一个single大的捆绑 JS 文件:

- dist
    - main.umd.js    
Run Code Online (Sandbox Code Playgroud)

由于两者都按预期工作,我想知道:

  1. 何时选择其中之一?
  2. 捆绑有什么好处,因为它需要额外的步骤,需要定义全局变量以防止依赖项也被捆绑,并且通常文件dist夹的可读性较差?
  3. 如果使用tsc就足够了,那么rollup捆绑 Web 应用程序和客户端(而不是库包)是否更有效?
  4. 两种方法都可以进行树摇动吗?它只是一个客户端捆绑器配置吗?

小智 2

我使用的重要因素之一tsc是我的项目是否使用模块。

如果我想将代码转换为 ESM 和 CJS,那么最好让 CJS 为多个文件,以便包的用户在导入较小包大小的模块时可以有选择。

如果用户使用 ESM 导入包:

import p from 'my-package'
Run Code Online (Sandbox Code Playgroud)

那么代码是一个大文件还是多个文件并不重要 - 只要文件不包含动态导入,那么用户的构建工具将能够静态分析我的包并从包中摇出未使用的代码。

如果用户使用 CJS 导入包:

const p = require('my-package')
Run Code Online (Sandbox Code Playgroud)

那么他们的构建工具甚至不会尝试对代码进行树摇动(除非他们使用某些CJS 插件),因为所有CJS 导入都是动态的。

用户可以通过从我的包中仅导入他们需要的文件来解决这个问题:

const p = require('my-package')
Run Code Online (Sandbox Code Playgroud)

如果 CJS 捆绑到一个大文件中,则这是不可能发生的行为。

lodash如果捆绑的话,这个现实世界的例子是不可能的:

在此输入图像描述