Rollup打包時Babel轉譯node_modules代碼的正確方法
使用Rollup構建項目時，正確配置Babel以轉譯node_modules中的代碼至關重要。本文將分析一個實際案例，并提供解決方案，幫助您避免Babel轉譯失敗的情況。
問題：Babel未能轉譯node_modules中的ES特性
假設您希望使用Babel轉譯@xyflow包中使用的空值合并運算符（??）。您的rollup.config.mjs和babel.config.json配置如下：
rollup.config.mjs:
babel({ extensions: ['.js', '.jsx', '.mjs'], presets: ['@babel/preset-env'], babelHelpers: 'runtime', include: ['src/**/*', 'node_modules/@xyflow/**/*'], }),
babel.config.json:
{ "presets": [ [ "@babel/preset-env", { "modules": false, "useBuiltIns": "usage", "corejs": "3", "targets": { "ie": 11 } } ], "@babel/preset-react" ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 3, "helpers": true, "regenerator": true, "babelHelpers": "runtime" } ], ["@babel/plugin-proposal-class-properties"], ["@babel/plugin-proposal-nullish-coalescing-operator"] ] }
盡管babel.config.json中已包含@babel/plugin-proposal-nullish-coalescing-operator插件，但打包后的代碼仍然包含??運算符，說明Babel未能正確轉譯@xyflow包。
解決方案：改進include配置
問題在于rollup.config.mjs中include選項的匹配規則不夠精確。 ‘node_modules/@xyflow/**/*’ 僅匹配node_modules/@xyflow目錄下的所有文件，但可能無法涵蓋所有需要轉譯的文件。
更可靠的解決方案是使用正則表達式：
include: ['src/**/*', /node_modules/((?:.*[/])?@xyflow(?:[/].*)?)/],
此正則表達式可以匹配node_modules目錄下所有@xyflow相關的文件路徑，確保Babel能夠正確轉譯所有需要的代碼。 修改后的include配置解決了??運算符未能轉譯的問題。
結論
在使用Rollup和Babel進行項目構建時，務必仔細檢查include或exclude選項的配置，確保其能夠準確匹配需要轉譯或排除的文件路徑。 正確的路徑匹配是成功轉譯node_modules中代碼的關鍵。 使用正則表達式可以提供更靈活和精確的匹配能力。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
