Why is ES6 code not translated to ES5 when Vite builds JS library?

Vite builds JS library: Solution for ES6 code not translated to ES5

When using Vite to build JS libraries, developers often encounter problems that ES6 code is not translated to ES5, which leads to compatibility errors in the old browser environment. This article analyzes a case and provides solutions.

In the case, the developer used Vite to build the JS library and used ES6's null value merge operator (??), but the packaged code still contains ES6 syntax, resulting in an error. Its vite.config.js configuration is as follows:

 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", // Set the target browser},
              useBuiltIns: "entry",
              corejs: 3,
            },
          ],
        ],
      }),
    ],
  },
});

The root cause of the problem lies in targets: { browsers: "> 0.25%, not dead" } . This configuration sets the target browser to a browser with a share of more than 0.25% and no maintenance has been stopped. Modern browsers natively support ES6, so Babel will not translate.

Solution:

To ensure ES5 compatibility, you need to modify targets configuration to explicitly specify lower version browsers, for example:

 targets: {
  browsers: ["ie >= 11", "last 2 versions", "not dead"] // or more specific version number}

Alternatively, for more granular control, consider using a more comprehensive browser compatibility list, such as the configuration provided by browserslist . In addition, other reasons that may cause errors, such as node environment version differences, need to be ruled out. Only after other factors are excluded, the Babel configuration will be adjusted. Make sure the @babel/preset-env plugin is installed correctly.

By modifying targets configuration, Babel will correctly translate the ES6 code to ES5, thus solving the compatibility issue. Remember, choosing the right targets configuration depends on the support range of your target browser.

The above is the detailed content of Why is ES6 code not translated to ES5 when Vite builds JS library?. For more information, please follow other related articles on the PHP Chinese website!