Fe Notebook

Bundless

Bundless 指把所有源码文件单独编译、平行输出做发布。输出 ESModule 及 CommonJS 产物时会使用 Bundless 构建模式。

Bundle 指把源码按 entry 打包成 1 个或多个文件做发布，也就是 webpack 的打包模式。输出 UMD 及依赖预打包产物时会使用 Bundle 构建模式。

通过保留文件结构更好地支持 treeshaking

如果你对你的库使用了打包工具或编译器，可以对其进行配置以保留源文件目录结构。这样可以更容易地对特定文件进行 side effects 标记，有助于开发者的打包工具进行 threeshaking。参考这篇文章了解更多信息。

一个例外是，如果你要创建一个不依赖任何打包工具可以直接在浏览器中使用的产出（通常是 umd 格式，但也可能是现代的 esm 格式）。在这种情况下，最好让浏览器请求一个大文件，而不是请求多个小文件。此外，你应该进行代码压缩并为其创建 sourcemap。打包库并非总是最佳选择：

我们失去了原始文件结构
通过在捆绑中转译，我们失去了现代语法
通过将 CSS 提取到全局 dist（Vue），我们失去了关键的 CSS
无论是否使用，依赖项始终会从捆绑中导入（第二个捆绑步骤可能会解决这个问题，但通常在开发中和具有副作用的依赖项中不会发生）

JS

typescript => js
esm => cjs

".ts", ".mts", ".cts" -> ".js", ".mjs", ".cjs"

".tsx", ".jsx" -> ".js"

Loader

build.config.ts

import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  entries: ['src/index'],
  declaration: true,
  clean: true,
  failOnWarn: false,
  externals: ['chalk'],
  rollup: {
    emitCJS: true,
    inlineDependencies: true,
  },
})

Bundless ​

JS ​

Loader ​

Bundless

JS

Loader