DEV Community
·
为 react-hook-use-cta 选择打包工具
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文介绍了如何安装和配置ParcelJS以打包库，重点在于配置package.json和.parcelrc，确保高效打包。通过安装依赖、设置输出路径和构建脚本，ParcelJS可生成适合不同环境的文件，最后运行构建命令生成打包文件。
🎯
关键要点
- 本文介绍了如何安装和配置ParcelJS以打包库。
- 选择打包工具时，目标是实现最小和简单的设置，生成可供其他打包工具使用的文件，并避免文件体积膨胀。
- ParcelJS适合用于打包库，安装依赖时使用了精确版本号以避免不一致的问题。
- package.json中的'exports'字段帮助模块解析找到相对路径，'main'和'module'字段指定输出文件路径。
- 设置'sideEffects'为false可以让webpack在打包时进行更积极的树摇。
- 构建脚本'scripts.build'用于清理dist文件夹并确保干净的本地构建。
- ParcelJS生成的文件名包含唯一哈希，以便其他打包工具在重建时识别新更改。
- .parcelrc文件中'extends'和'bundler'字段用于启用树摇和创建可树摇的包。
- 运行构建命令'npm run build'以查看ParcelJS在dist文件夹中生成的内容。
❓
延伸问答
如何安装ParcelJS以打包库？
可以通过命令'npm i -DE parcel @parcel/bundler-library @parcel/transformer-typescript-types rimraf'来安装ParcelJS及其依赖。
在package.json中如何配置输出文件路径？
可以通过'main'和'module'字段指定输出文件路径，'main'用于CJS包，'module'用于现代JS包。
为什么要将'sideEffects'设置为false？
'sideEffects'设置为false可以让webpack在打包时进行更积极的树摇，优化打包结果。
如何确保ParcelJS生成的文件名包含唯一哈希？
ParcelJS生成的文件名会根据文件内容变化而包含唯一哈希，以便其他打包工具识别新更改。
如何运行ParcelJS的构建命令？
可以通过命令'npm run build'来运行ParcelJS的构建命令，生成打包文件。
.parcelrc文件的作用是什么？
.parcelrc文件用于配置ParcelJS的打包选项，包括启用树摇和指定打包器。
➡️
