https://cdnwiki.taoya.art/uploads/71628916-9758-498d-9905-582a94c92d10/901c21a2-cd6a-4f1b-a534-d38a326238bc/%E6%B7%B1%E5%85%A5%E4%BA%86%E8%A7%A3%E4%B8%89%E6%96%B9%E5%BA%93%E6%9E%84%E5%BB%BA%E6%B5%81%E7%A8%8B%E5%8F%8A%E5%AE%9E%E8%B7%B5.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=LTAI5t93t1XVgLH1FnC3uHe3%2F20241004%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Date=20241004T120032Z&X-Amz-Expires=900&X-Amz-Signature=347685685428cf1af4bda45536543d05440d0c1be13a1abf0998cbfe42f54b63&X-Amz-SignedHeaders=host&x-id=GetObject

前言

1.梳理基本的前端构建体系认知

2. 探讨前端构建体系未来的展望

构建场景

js 产出格式有 ==esm、cjs、umd==、iife、amd、...

esm

cjs

umd

其他资产

除了js，我们还要处理 css、image、dts 等资产

如何去处理资产变成我们要要的呢？

构建

构建流程图

常用构建工具

产物分类

output.preserveModules: true 可以保持原始模块结构

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es',
    preserveModules: true,
  },
};

output.preserveComments 选项 保留注释

bundle

preserve

构建工具生态

场景一

场景二

小结

衡量产物

开源实践

antd mobile

dayjs

工具选择总结

未来方向

参考

现代 JavaScript 库开发

早早聊-深入了解三方库构建流程及实践