静态变量 - 为什么vite+typescript+vue3 编译的代码浏览器不支持?

Question

export class UserService {    private static _instance: UserService = new UserService()    static getInstance() {        return UserService._instance    }}

使用vite打包后转成了

class _ {    static _instance = new _;}

但是转化的 语法在老浏览器不支持(es6 不支持 static 声明类变量)，请求有知道如何解决的吗？

我尝试了使用babel，但是不知道如何配置

Answer 1

Vue3已经放弃老版本IE了:

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md
https://babeljs.io/docs/en/learn/

不过可以试试这个:

https://juejin.cn/post/7114586736201580575

Answer 2

首先，让我们理解一下你遇到的问题。你使用 Vite、TypeScript 和 Vue 3 打包后的代码在老版本的浏览器中不支持，特别是 ES6 不支持的 static 声明类变量。

为了解决这个问题，你可以使用 Babel 来转换你的代码。Babel 是一个 JavaScript 编译器，它可以将 ES6+ 代码转换为向后兼容的 JavaScript 版本。

下面是如何配置 Babel 的步骤：

1. 首先，确保你已经安装了 Babel 的相关依赖。你可以使用 npm 或 yarn 来安装它们：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript

或者

yarn add --dev @babel/core @babel/preset-env @babel/preset-typescript

2. 创建一个 Babel 配置文件，例如 .babelrc，并添加以下内容：

{  "presets": [    [      "@babel/preset-env",      {        "targets": {          "browsers": ["last 2 versions", "ie >= 11"]        }      }    ],    "@babel/preset-typescript"  ]}

这将设置 Babel 转换目标为支持 IE11 以及最后两个浏览器的版本。

3. 在 Vite 的配置文件（vite.config.js 或 vite.config.ts）中，确保你的 build.rollupOptions 配置包含了 Babel 的相关配置。例如：

import { defineConfig } from 'vite'// 如果你使用 TypeScript，还需要导入 tsconfig.json 文件中的compilerOptionsimport { compilerOptions } from './tsconfig.json'export default defineConfig({  build: {    rollupOptions: {      // 在这里添加 Babel 的配置      external: ['vue'], // 根据你的项目需要来设置 external 列表      output: {        // 设置变量名前缀，避免与全局冲突        chunkFileNames: 'static/js/[name]-[hash].js',        entryFileNames: 'static/js/[name]-[hash].js',        assetFileNames: 'static/assets/[name]-[hash].[ext]'      },      plugins: [        // 在这里添加 Babel 的插件和预设配置        // 例如：@babel/preset-env 和 @babel/preset-typescript 的配置文件路径等      ]    }  }})

4. 最后，确保你的项目中的 TypeScript 文件（.ts）都被正确地转换为 JavaScript。在 Vite 中，TypeScript 会自动被转换，所以你只需要确保 Babel 可以正确地处理它们。如果你在 Babel 中没有正确配置 TypeScript，可能会遇到类型错误的问题。在 .babelrc 文件中添加 "@babel/preset-typescript" 可以解决这个问题。
5. 重新运行 Vite 来构建你的项目。这次，Babel 会将你的代码转换为老版本浏览器兼容的语法。你应该能够看到转换后的代码与原始代码有所不同，但它们的功能应该是相同的。