uni-app vue3 cli es6转es5

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app vue3 cli es6转es5
用各种方法 legacyPlugin、babel、polyfill（polyfill 解释不了可选链）等等，都转不了，在旧版本浏览器上报错 ?.、import.meta 等等。

官方又说自带 ES6 转 ES5，又跑去下载老版本的 HBuilderX，搞这搞那，没有任何作用，非常抓狂。

最后发现 UniApp 自己在编译时带了 legacyPlugin，并且可以配置，问题解决。

vite.config.ts

uni({
    viteLegacyOptions: {
        targets: ['Chrome > 70']
    }
})

官方文档没有任何提及，这方法还是突发奇想，点到 uni 里面看抛出的 ts 才看到并尝试的，并且刚巧 build 了一版发到服务器上试，因为这个编译只在 build 时生效，特么开发模式下该报错还是报错，这让我怎么测试、心态都崩了。。

DEBUG 全靠猜，唉~


Harmonyos Next教程
1 回复

在将基于 uni-app 和 Vue 3 CLI 开发的项目从 ES6 语法转换为 ES5 语法时，由于 Vue 3 本身对 ES6+ 特性的大量使用，完全避免 ES6+ 语法可能会相当复杂。不过，我们可以使用一些工具来自动化这个过程，比如 Babel。

以下是一个基本的步骤和示例代码，展示如何使用 Babel 将 ES6 代码转换为 ES5。

1. 安装 Babel 相关依赖

首先，确保你的项目根目录下有一个 package.json 文件。然后，安装 Babel 及其必要的插件和预设。

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

2. 配置 Babel

在项目根目录下创建一个 .babelrc 文件，配置 Babel 使用 @babel/preset-env 预设。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

这里我们指定了目标浏览器为 IE 11，并启用了 useBuiltIns 和 corejs 选项，以便 Babel 可以根据需要自动引入 polyfills。

3. 配置 Webpack（如果使用 Vue CLI，则跳过此步）

如果你不是使用 Vue CLI 创建的项目，可能需要手动配置 Webpack。在 webpack.config.js 中添加 Babel loader。

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

4. 检查并调整代码

尽管 Babel 可以自动转换大部分 ES6+ 语法，但某些 Vue 3 特性（如 Composition API）在 ES5 中可能难以直接实现。因此，你可能需要手动调整这部分代码，或者使用兼容的库。

示例代码转换

假设有以下 ES6 代码：

const add = (a, b) => a + b;

Babel 会自动将其转换为：

var add = function add(a, b) {
  return a + b;
};

总结

虽然上述步骤提供了一个基本的框架，但实际的转换过程可能会因项目的复杂性和具体使用的 ES6+ 特性而有所不同。对于大型项目，建议使用代码质量和转换工具（如 ESLint 配置为 ES5 环境）来帮助识别和解决潜在的问题。

回到顶部