Vite Builds JSライブラリ：ES5に翻訳されていないES6コードのソリューション

Viteを使用してJSライブラリを構(gòu)築する場合、開発者はES6コードがES5に翻訳されていない問題に遭遇することが多く、古いブラウザー環(huán)境で互換性エラーにつながります。この記事では、ケースを分析し、ソリューションを提供します。

ケースでは、開発者はVITEを使用してJSライブラリを構(gòu)築し、ES6のNull値マージオペレーター（??）を使用しましたが、パッケージ化されたコードには依然としてES6構(gòu)文が含まれているため、エラーが発生します。そのvite.config.js構(gòu)成は次のとおりです。

 {vite "から{defineconfig}をインポートします。
「@rollup/Plugin-Babel」からBabelをインポートします。

デフォルトのデフォルトdefineconfigをエクスポートする（{
  建てる： {
    lib：{
      エントリ： "./lib/main.js"、
      名前：「FastCodetEST」、
      ファイル名：（フォーマット）=> `fastCodetest。$ {format} .js`、
      フォーマット：["es"、 "umd"]、
    }、
  }、
  lollUpotions：{
    プラグイン：[
      バベル（{
        Babelhelpers：「バンドル」、
        除外：「node_modules/**」、
        プリセット：[
          [
            「@babel/preset-env」、
            {
              ターゲット：{
                ブラウザ：「> 0.25％、死んでいない」、//ターゲットブラウザを設(shè)定します}、
              usebuiltins： "entry"、
              corejs：3
            }、
          ]、、
        ]、、
      }）、
    ]、、
  }、
}）;

問題の根本原因はtargets: { browsers: "> 0.25%, not dead" } 。この構(gòu)成により、ターゲットブラウザは0.25％以上のシェアを持つブラウザに設(shè)定され、メンテナンスは停止されていません。最新のブラウザはES6をネイティブにサポートするため、Babelは翻訳しません。

解決：

ES5の互換性を確保するには、 targets構(gòu)成を変更して、より低いバージョンのブラウザを明示的に指定する必要があります。

ターゲット：{
  ブラウザ：["ie> = 11"、 "last 2バージョン"、 "not dead"] //より具體的なバージョン番號}

または、より詳細(xì)な制御を行うには、 browserslistが提供する構(gòu)成など、より包括的なブラウザ互換性リストの使用を検討してください。さらに、ノード環(huán)境バージョンの違いなど、エラーを引き起こす可能性のある他の理由を除外する必要があります。他の要因が除外された後にのみ、Babel構(gòu)成が調(diào)整されます。 @babel/preset-envプラグインが正しくインストールされていることを確認(rèn)してください。

targets構(gòu)成を変更することにより、BabelはES6コードをES5に正しく翻訳し、互換性の問題を解決します。適切なtargets構(gòu)成を選択すると、ターゲットブラウザのサポート範(fàn)囲に依存することを忘れないでください。

以上がViteがJSライブラリを構(gòu)築するのに、なぜES6コードがES5に翻訳されないのですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。