ロールアップとバベル構成を微調整して、node_modulesの特定のコードを正しく翻訳する方法は？

ロールアップがパッケージ化されているときにnode_modulesで特定のコードを翻訳するためのバベルのヒント

フロントエンドプロジェクトのパッケージングプロセス中、ロールアップはモジュール処理を担当し、Babelはコード翻訳を担当します。ただし、バベルはnode_modulesの特定のパッケージを適切に処理できない場合があります。この記事では、この問題を解決する方法について説明します。

問題：Babelは、 node_modulesで特定のコードを翻訳できませんでした

ロールアップを使用してパッケージ化するとしたら、babelを使用してnode_modulesの@xyflowパッケージを翻訳する必要がありますが、null値は@xyflowパッケージのオペレーターをマージします??翻訳できません。

ロールアップ構成ファイル（ rollup.config.mjs ）のbabel構成は次のとおりです。

バベル（{
  拡張機能：['.js'、 '.jsx'、 '.mjs']、
  プリセット：['@babel/preset-env']、
  Babelhelpers：「ランタイム」、
  含める：['src/**/*'、 'node_modules/@xyflow/**/*']、
}）、

Babel構成ファイル（ babel.config.json ）は次のとおりです。

 {
  「プリセット」：[
    [
      「@babel/preset-env」、
      {
        「モジュール」：FALSE、
        「UseBuiltins」：「使用」、
        「corejs」： "3"、
        「ターゲット」：{
          「IE」：11
        }
      }
    ]、、
    「@babel/preset-react」
  ]、、
  「プラグイン」：[
    [
      「@babel/plugin-transform-runtime」、
      {
        「corejs」：3
        「ヘルパー」：本当、
        「再生者」：本当、
        「バベルヘルパー」：「ランタイム」
      }
    ]、、
    ["@babel/plugin-proposal-class-properties"]、
    ["@babel/plugin-proposal-nullish-coalescing-operator"]]
  ]
}

バージョン情報：

 <code>"rollup": "4.22.5", "@babel/core": "7.25.2", "@babel/plugin-proposal-class-properties": "7.18.6", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-transform-react-jsx": "7.25.2", "@babel/plugin-transform-runtime": "7.25.4", "@babel/preset-env": "7.25.4", "@babel/preset-react": "7.24.7", "@babel/runtime-corejs3": "7.25.6",</code>

解決策：ルールincludeを改善します

問題は、 includeルールの一致が十分に正確ではないことです。元の構成は@xyflowパッケージの下ですべてのファイルを正確に一致させることはできません。

改善された構成include ：

 include：['src/**/*'、/node_modules \/(？：.* .*）?@xyflow(？：[/\ \] .*)/]、

正規表現を使用してnode_modules/@xyflowディレクトリ内のすべてのファイルをより柔軟に一致させるため、babelが@xyflowパッケージのコードを正しく翻訳し、翻訳の問題を解決するようにしますか??オペレーター。

この場合、ロールアップとバベルの構成の詳細が重要であることを理解しています。特に、 node_modulesの特定のパッケージを扱う場合、正確なinclude重要である場合。

以上がロールアップとバベル構成を微調整して、node_modulesの特定のコードを正しく翻訳する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。