Vite構(gòu)建JS庫：es6代碼未轉(zhuǎn)譯為ES5的解決方案
使用Vite構(gòu)建JS庫時，開發(fā)者經(jīng)常遇到ES6代碼未轉(zhuǎn)譯為ES5的問題，導(dǎo)致庫在舊版瀏覽器環(huán)境中出現(xiàn)兼容性錯誤。本文分析一個案例，并提供解決方案。
案例中，開發(fā)者使用Vite構(gòu)建JS庫，使用了ES6的空值合并運算符（??），但打包后的代碼仍包含ES6語法，導(dǎo)致報錯。 其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", // 設(shè)定目標瀏覽器 }, useBuiltIns: "entry", corejs: 3, }, ], ], }), ], }, });
問題根源在于targets: { browsers: “> 0.25%, not dead” }。此配置將目標瀏覽器設(shè)定為占有率大于0.25%且未停止維護的瀏覽器。現(xiàn)代瀏覽器原生支持ES6，因此Babel不會進行轉(zhuǎn)譯。
解決方案：
為了確保ES5兼容性，需要將targets配置修改為明確指定低版本瀏覽器，例如：
targets: { browsers: ["ie >= 11", "last 2 versions", "not dead"] // 或更具體的版本號 }
或者，為了更精細的控制，可以考慮使用一個更全面的瀏覽器兼容性列表，例如browserslist提供的配置。 此外，需排除其他可能導(dǎo)致錯誤的原因，例如node環(huán)境版本差異。 只有在排除了其他因素后，再調(diào)整Babel配置。 確保@babel/preset-env插件已正確安裝。
通過修改targets配置，Babel將正確地將ES6代碼轉(zhuǎn)譯為ES5，從而解決兼容性問題。 記住，選擇合適的targets配置取決于你的目標瀏覽器支持范圍。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
