Guy*_*Guy 5 rollup npm typescript gdi-cms
据我所知,在发布 Typescript NPM 包(库,而不是客户端)时,我有两个常规选择:
Typescript
's编译器要么运行:
tsc
Run Code Online (Sandbox Code Playgroud)
并tsconfig.json
定义outDir
:
{
"compilerOptions": {
...
"outDir": "dist",
},
"exclude": ["dist/**"]
}
Run Code Online (Sandbox Code Playgroud)
输出将是multiple
javascript 文件,一切都会按预期工作。
- dist
- dir/file1.js
- dir/file2.js
- index.js
Run Code Online (Sandbox Code Playgroud)
Rollup
使用以下命令将所有文件加入到一个包中rollup
:
tsc
Run Code Online (Sandbox Code Playgroud)
输出将是一个single
大的捆绑 JS 文件:
- dist
- main.umd.js
Run Code Online (Sandbox Code Playgroud)
由于两者都按预期工作,我想知道:
dist
夹的可读性较差?tsc
就足够了,那么rollup
捆绑 Web 应用程序和客户端(而不是库包)是否更有效?小智 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
如果捆绑的话,这个现实世界的例子是不可能的: