vite搭建vue项目,如何在把所有es6及以上语法转为es5?

697 阅读1分钟

1、为什么要转为es5? H5页面嵌在支付宝,页面白屏。经排查发现在全局路由守卫里使用了startsWith,支付宝不支持这个api,语法报错导致白屏 2、采用什么方式? 因为项目是用vite作为构建工具,开始准备用@vitejs/plugin-legacy插件。经过调试发现legacy会导致项目build时,图片等静态资源不走assetFileNames,因此图片等资源只能打包在assetsDir目录下,与预期不符。另外需要手动引入垫片。最后采用了@rollup/plugin-babel结合core-js3来转化。

defineConfig({ ..., rollupOptions: { plugins: [ getBabelOutputPlugin({ presets: [ ['@babel/preset-env'] ], plugins: [ [ '@babel/plugin-transform-runtime', { corejs: 3, useESModules: true } ] ] }) ] } })