项目配置babel

配置 babel 兼容低版本

一、前置准备

1
yarn add @babel/cli@^7.17.10 @babel/preset-env@^7.22.5 @babel/polyfill@^7.12.1 @vue/babel-preset-app@^5.0.8

二、修改 babel.config.js

1
2
3
4
5
6
7
8
9
10
11
presets: [
  [
    "@babel/preset-env",
    {
      modules: "amd",
      corejs: 3,
      useBuiltIns: "entry",
      targets: ["Android >= 4.4", "ios >= 9", "chorme >= 45", "ie >= 9"],
    },
  ],
];

修改 vue.config.js

1
2
3
4
5
6
7
8
9
/**
 * @type {import("@vue/cli-service").PluginAPI}
 */
module.exports = {
  // chainWebpack: config => {
  //   config.optimization.minimize(false)
  // },
  transpileDependencies: [/node_modules/],
};

vite 配置 babel

vue3 + vite + babel 兼容 chrome 58

安装

1
2
npm install vue@next
npm install --save-dev @vitejs/plugin-vue @babel/core @babel/preset-env @rollup/plugin-babel

配置 vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import babel from "@rollup/plugin-babel";

export default defineConfig({
  plugins: [
    vue(),
    babel({
      babelHelpers: "bundled",
      extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
    }),
  ],
});

配置 .babelrc.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

注意事项

确保你的 vite.config.js 和.babelrc.json 文件路径正确，且内容格式无误。
如果你使用的是 TypeScript，可能还需要安装@babel/preset-typescript 预设，并在 Babel 配置中添加相应的预设。
根据你的项目需求，你可能还需要安装其他 Babel 插件或预设来进行更复杂的代码转换。

vue2 + vite + babel 兼容

创建项目

1
2
npm install -g @vue/cli
vue create simple-vue2-vite

安装 vite

1
2
3
cd simple-vue2-vite
yarn add vite vite-plugin-vue2 --dev

配置 vite.config.js

1
2
3
4
5
6
import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";

export default defineConfig({
  plugins: [createVuePlugin({ jsx: true })],
});

配置 .babelrc 或者 babel.config.js

1
2
3
{
  "presets": ["@babel/preset-env"]
}

安装 babel 依赖

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

修改 index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

配置入口文件 main.js

1
2
3
4
import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

JavaScript 代码兼容性配置

对于 uni-app 项目中的 JavaScript 代码，你需要确保它在不同平台上都能正常运行。以下是一些建议：

‌ 使用 Babel 进行代码转换 ‌：
由于部分较老的 Android 机型不支持 ES6 语法，你可以使用 Babel 将 ES6 代码转换为 ES5 代码。这通常需要在你的构建系统中配置 Babel。然而，对于 uni-app 项目，Babel 的配置可能不是直接在 Vite 中进行的，而是依赖于 uni-app 的编译系统。你可以查看 uni-app 的官方文档，了解如何配置 Babel。

‌ 避免使用 ES6 新语法 ‌：
为了确保最大的兼容性，你可以尽量避免在代码中使用 ES6 的新语法特性，或者在使用这些特性时确保它们已经被 Babel 等工具正确转换。

‌ 布局兼容性 ‌：
uni-app 默认采用的是 flex 布局，但不同 Android 机型对于 flex 布局的支持程度有所不同。如果遇到 UI 显示不一致的问题，你可以考虑采用 rem 或 px 进行布局，避免使用相对单位。同时，在使用 flex 布局时，尽量不要涉及到复杂嵌套，避免使用 flex-basis 等不稳定属性。

注意事项

确保你的 uni-app 和 Vite 版本都是最新的，以便获得最新的功能和修复。
在配置过程中，如果遇到任何问题，可以查阅官方文档或社区资源寻求帮助。
根据你的具体需求和目标平台，你可能需要对上述配置进行调整和优化。

vue2 + uni-app + vite 兼容

安装依赖

1
2
yarn add postcss postcss-loader autoprefixer --dev
yarn add @babel/core @babel/preset-env babel-loader --dev

创建 postcss.config.js 文件

1
2
3
4
5
6
// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
  },
};

配置 vite

1
2
3
4
5
6
7
8
9
10
11
12
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [require("autoprefixer")],
    },
  },
});

配置 .babelrc 或者 babel.config.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// babel.config.js 示例
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          // 在这里指定你需要支持的浏览器或环境
          // 例如：chrome: "60", firefox: "50", ie: "11"
          // 对于uni-app项目，通常需要根据目标平台（如小程序、H5、App等）来配置targets
          // 这里只是一个示例，具体配置需要根据你的项目需求来确定
        },
        useBuiltIns: "usage", // 根据实际使用情况自动引入polyfill
        corejs: 3, // 指定core-js的版本
      },
    ],
  ],
  plugins: [
    // 在这里添加你需要的babel插件
    // 例如：'@babel/plugin-proposal-optional-chaining', // 可选链操作符插件
    // 注意：只有当你确实需要使用某个插件时才添加它
  ],
};

注意事项

‌uni-app 的特殊处理 ‌：uni-app 已经内置了对 Vue 文件的处理逻辑，包括使用 Vue Loader 进行编译。因此，在大多数情况下，你不需要在 vite 配置中显式添加 babel-loader 来处理 Vue 文件。但是，如果你需要转译非 Vue 文件（如 JavaScript 库或工具函数），则可能需要手动配置 babel-loader。

‌targets 的配置 ‌：在 babel 配置中，targets 选项用于指定你需要支持的浏览器或环境。对于 uni-app 项目，这通常取决于你的目标平台（如小程序、H5、App 等）。因此，你需要根据你的项目需求来配置 targets。

‌polyfill 的使用 ‌：如果你的项目需要支持旧版浏览器或环境，并且这些环境不支持 ES6+的新特性，那么你可能需要使用 polyfill 来提供这些特性的实现。在 babel 配置中，可以通过 useBuiltIns 和 corejs 选项来自动引入 polyfill。

‌ 缓存问题 ‌：在开发过程中，如果你发现 babel 没有按预期工作（例如：代码没有被转译），可能是因为缓存导致的问题。此时，你可以尝试清理项目的缓存（如 node_modules/.cache 目录）或重启开发服务器。

‌ 依赖版本 ‌：确保你安装的 babel 相关依赖版本与你的项目兼容。有时候，新版本的 babel 插件或 preset 可能不兼容旧版本的 node.js 或 vite。因此，在升级依赖时，请务必注意版本兼容性。

vite 兼容 chrome 51

vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import legacy from "@vitejs/plugin-legacy";
import "core-js/features/object/entries";
import "core-js/features/object/values";
import "core-js/stable/array/flat-map";
import "regenerator-runtime/runtime";

export default {
  plugins: [
    legacy({
      targets: ["defaults", "ie >= 11", "chrome 52"], //需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
      renderLegacyChunks: true,
      polyfills: [
        "es.symbol",
        "es.array.filter",
        "es.promise",
        "es.promise.finally",
        "es/map",
        "es/set",
        "es.array.for-each",
        "es.object.define-properties",
        "es.object.define-property",
        "es.object.get-own-property-descriptor",
        "es.object.get-own-property-descriptors",
        "es.object.keys",
        "es.object.to-string",
        "web.dom-collections.for-each",
        "esnext.global-this",
        "esnext.string.match-all",
      ],
    }),
  ],
};