Babel 配置实战大型项目构建提速的 5 个决策点【免费下载链接】babel-handbook:blue_book: A guided handbook on how to use Babel and how to create plugins for Babel.项目地址: https://gitcode.com/gh_mirrors/ba/babel-handbook当一次 clone 后的冷构建要跑 4 分钟、一次保存要等 20 秒才出结果时就该认真对待 Babel 配置了全文共 5 个决策点——按阶段选型、最小配置、速度、包体积、质量与协作熟悉 npm 但对构建管线没概念的人可对照仓库里的 Babel Handbook 查细节。选型速查按项目阶段对号入座 先对号入座再往下读不同阶段的配置重心完全不同用错阶段配置是返工的最大来源。项目阶段推荐配置不该做的事个人项目、练手babel/preset-env 一份最小.babelrc不装一堆插件凑专业感团队日常开发10 人以上预设 babel/plugin-transform-runtime环境差异走env块不把环境判断散落在各业务文件里发布组件库babel src -d lib整体编译助手统一交给babel/runtime不把 polyfill 打进产物替使用方做决定打包器已内置 Babel如 Vite直接用构建工具的内置支持不重复挂一层babel-loader链多环境部署targets按环境切换开发node: current生产用浏览器列表不维护三份几乎一样的配置文件10 分钟跑通最小 Babel 配置装一次全部作为开发依赖装到项目本地而不是全局——不同项目可能锁定不同版本本地安装避免了对机器环境的隐式依赖npm install --save-dev babel/core babel/cli babel/preset-env根目录放一个文件.babelrc最小可用形态{ presets: [ [babel/preset-env, { targets: { node: current } }] ] }注意三点presets是插件的集合什么都不配时 Babel 默认不做任何转换所以babel/preset-env是唯一必选项。package.json的 scripts 里加build: babel src -d libnpm run build即可整目录编译。面向浏览器交付时把targets换成 browserslist 写法如[last 2 versions, 1%, not dead]。先跑通再优化需要扩展时从下面列表挑一次只加一条写 TypeScript加babel/preset-typescript用 class fields 这类提案语法加babel/plugin-proposal-class-properties要支持老浏览器useBuiltIns: usagecore-js3别再整体引入babel/polyfill开发与生产插件不同放env块里由NODE_ENV驱动四个维度各取一瓢 ⚡每个维度只给一条动作外加一句适用条件。速度——开缓存。Webpack 构建里给babel-loader打开cacheDirectory: true想让缓存读写更快再设cacheCompression: false。适用条件构建耗时已经成为团队抱怨点才值得做小项目开了也感知不到。包体积——按需注入 polyfill。babel/preset-env设useBuiltIns: usage配corejs: 3只注入代码里真正用到的 API。适用条件需要兼容老浏览器、且 core-js 占体积明显目标是现代浏览器就别动。质量——让 Linter 认识新语法。ESLint 的 parser 指向babel-eslintlint 不再对新语法误报。适用条件linter 一碰到新语法就报错就先换 parser规则再按eslint:recommended起步不要一次开满 strict。协作——把预设收进共享包。把团队共用的 preset 打成内部预设包如babel-preset-team-config版本固定在 devDependencies。适用条件10 人以上、同仓库多个子项目能省掉你本机构建为什么和我不一样的反复沟通别急着搬进 monorepo先把单项目的.babelrc跑稳。3 种高频构建报错的根因 这三类问题占了日常 Babel 故障的大头先看症状再改配置别盲调参数。症状根因一条命令或配置冷启动后首次构建慢得离谱之后增量才正常Babel 默认不缓存每次都全量重算babel-loader规则加cacheDirectory: true包体积莫名涨了数百 KB全量 polyfill 被打进来或开发专用插件混进了生产包useBuiltIns: usage开发插件挪进env.development新浏览器正常老浏览器抛is not a function转译只翻译语法、不补 API运行时缺了原生方法按目标环境精确写 browserslist缺失的 API 交给 core-js 3收尾一条判断标准开发机复现不了问题、团队也没人抱怨构建时间就别加配置——每多一个插件就多一分维护成本同一个坑反复有人踩才一次加一项且每轮只改一个变量好判断到底哪条起了作用。安装细节、.babelrc完整写法与插件开发可查仓库内的中文手册Babel 用户手册。【免费下载链接】babel-handbook:blue_book: A guided handbook on how to use Babel and how to create plugins for Babel.项目地址: https://gitcode.com/gh_mirrors/ba/babel-handbook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Babel 配置实战大型项目构建提速的 5 个决策点【免费下载链接】babel-handbook:blue_book: A guided handbook on how to use Babel and how to create plugins for Babel.项目地址: https://gitcode.com/gh_mirrors/ba/babel-handbook当一次 clone 后的冷构建要跑 4 分钟、一次保存要等 20 秒才出结果时就该认真对待 Babel 配置了全文共 5 个决策点——按阶段选型、最小配置、速度、包体积、质量与协作熟悉 npm 但对构建管线没概念的人可对照仓库里的 Babel Handbook 查细节。选型速查按项目阶段对号入座 先对号入座再往下读不同阶段的配置重心完全不同用错阶段配置是返工的最大来源。项目阶段推荐配置不该做的事个人项目、练手babel/preset-env 一份最小.babelrc不装一堆插件凑专业感团队日常开发10 人以上预设 babel/plugin-transform-runtime环境差异走env块不把环境判断散落在各业务文件里发布组件库babel src -d lib整体编译助手统一交给babel/runtime不把 polyfill 打进产物替使用方做决定打包器已内置 Babel如 Vite直接用构建工具的内置支持不重复挂一层babel-loader链多环境部署targets按环境切换开发node: current生产用浏览器列表不维护三份几乎一样的配置文件10 分钟跑通最小 Babel 配置装一次全部作为开发依赖装到项目本地而不是全局——不同项目可能锁定不同版本本地安装避免了对机器环境的隐式依赖npm install --save-dev babel/core babel/cli babel/preset-env根目录放一个文件.babelrc最小可用形态{ presets: [ [babel/preset-env, { targets: { node: current } }] ] }注意三点presets是插件的集合什么都不配时 Babel 默认不做任何转换所以babel/preset-env是唯一必选项。package.json的 scripts 里加build: babel src -d libnpm run build即可整目录编译。面向浏览器交付时把targets换成 browserslist 写法如[last 2 versions, 1%, not dead]。先跑通再优化需要扩展时从下面列表挑一次只加一条写 TypeScript加babel/preset-typescript用 class fields 这类提案语法加babel/plugin-proposal-class-properties要支持老浏览器useBuiltIns: usagecore-js3别再整体引入babel/polyfill开发与生产插件不同放env块里由NODE_ENV驱动四个维度各取一瓢 ⚡每个维度只给一条动作外加一句适用条件。速度——开缓存。Webpack 构建里给babel-loader打开cacheDirectory: true想让缓存读写更快再设cacheCompression: false。适用条件构建耗时已经成为团队抱怨点才值得做小项目开了也感知不到。包体积——按需注入 polyfill。babel/preset-env设useBuiltIns: usage配corejs: 3只注入代码里真正用到的 API。适用条件需要兼容老浏览器、且 core-js 占体积明显目标是现代浏览器就别动。质量——让 Linter 认识新语法。ESLint 的 parser 指向babel-eslintlint 不再对新语法误报。适用条件linter 一碰到新语法就报错就先换 parser规则再按eslint:recommended起步不要一次开满 strict。协作——把预设收进共享包。把团队共用的 preset 打成内部预设包如babel-preset-team-config版本固定在 devDependencies。适用条件10 人以上、同仓库多个子项目能省掉你本机构建为什么和我不一样的反复沟通别急着搬进 monorepo先把单项目的.babelrc跑稳。3 种高频构建报错的根因 这三类问题占了日常 Babel 故障的大头先看症状再改配置别盲调参数。症状根因一条命令或配置冷启动后首次构建慢得离谱之后增量才正常Babel 默认不缓存每次都全量重算babel-loader规则加cacheDirectory: true包体积莫名涨了数百 KB全量 polyfill 被打进来或开发专用插件混进了生产包useBuiltIns: usage开发插件挪进env.development新浏览器正常老浏览器抛is not a function转译只翻译语法、不补 API运行时缺了原生方法按目标环境精确写 browserslist缺失的 API 交给 core-js 3收尾一条判断标准开发机复现不了问题、团队也没人抱怨构建时间就别加配置——每多一个插件就多一分维护成本同一个坑反复有人踩才一次加一项且每轮只改一个变量好判断到底哪条起了作用。安装细节、.babelrc完整写法与插件开发可查仓库内的中文手册Babel 用户手册。【免费下载链接】babel-handbook:blue_book: A guided handbook on how to use Babel and how to create plugins for Babel.项目地址: https://gitcode.com/gh_mirrors/ba/babel-handbook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
