Vite構建JS庫時，ES6代碼為何未轉譯為ES5？

Vite構建JS庫：ES6代碼未轉譯為ES5的解決方案

使用Vite構建JS庫時，開發者經常遇到ES6代碼未轉譯為ES5的問題，導致庫在舊版瀏覽器環境中出現兼容性錯誤。本文分析一個案例，並提供解決方案。

案例中，開發者使用Vite構建JS庫，使用了ES6的空值合併運算符（??），但打包後的代碼仍包含ES6語法，導致報錯。 其vite.config.js配置如下：

 import { defineConfig } from "vite";
import babel from "@rollup/plugin-babel";

export default defineConfig({
  build: {
    lib: {
      entry: "./lib/main.js",
      name: "FastcodeTest",
      fileName: (format) => `fastcodeTest.${format}.js`,
      formats: ["es", "umd"],
    },
  },
  rollupOptions: {
    plugins: [
      babel({
        babelHelpers: "bundled",
        exclude: "node_modules/**",
        presets: [
          [
            "@babel/preset-env",
            {
              targets: {
                browsers: "> 0.25%, not dead", // 設定目標瀏覽器},
              useBuiltIns: "entry",
              corejs: 3,
            },
          ],
        ],
      }),
    ],
  },
});

問題根源在於targets: { browsers: "> 0.25%, not dead" } 。此配置將目標瀏覽器設定為佔有率大於0.25%且未停止維護的瀏覽器。現代瀏覽器原生支持ES6，因此Babel不會進行轉譯。

解決方案：

為了確保ES5兼容性，需要將targets配置修改為明確指定低版本瀏覽器，例如：

 targets: {
  browsers: ["ie >= 11", "last 2 versions", "not dead"] // 或更具體的版本號}

或者，為了更精細的控制，可以考慮使用一個更全面的瀏覽器兼容性列表，例如browserslist提供的配置。 此外，需排除其他可能導致錯誤的原因，例如node環境版本差異。 只有在排除了其他因素後，再調整Babel配置。 確保@babel/preset-env插件已正確安裝。

通過修改targets配置，Babel將正確地將ES6代碼轉譯為ES5，從而解決兼容性問題。 記住，選擇合適的targets配置取決於你的目標瀏覽器支持範圍。

以上是Vite構建JS庫時，ES6代碼為何未轉譯為ES5？的詳細內容。更多資訊請關注PHP中文網其他相關文章！