如何確保Babel在使用Rollup打包時正確轉譯node_modules中的代碼?

如何確保Babel在使用Rollup打包時正確轉譯node_modules中的代碼?

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
喜歡就支持一下吧
點贊6 分享