如何在Vite项目中包含Javascript AMD模块

Question

在我使用 Vite 捆绑器的项目中，我有两个旧的 AMD 库

azure-devops-extension-api

和

azure-devops-extension-sdk

，但 Vite 仅支持 ESM 模块。这意味着如果我在 javascript 文件中有：

import * as API from `azure-devops-extension-api`

浏览器会输出

Uncaught ReferenceError: define is not defined

是否可以在构建时使用带有

rollup-plugin-amd

的

build.rollupOptions

插件将 AMD 模块转换为 ESM，在这种情况下，我的

vite.config.ts

应该是什么样子？

Answer 1

最近我解决了同样的问题。

首先将AMD模块转换为commonjs模块（

vite-plugin-babel

+

babel-plugin-transform-amd-to-commonjs

），然后转换为ES6模块（

vite-plugin-commonjs

）。

对我来说效果很好。

这是我项目中的 vite 插件配置片段

export default defineConfig({
    // ...
    plugins: [
        // ...
        babel({
            babelConfig: {
                plugins: ["transform-amd-to-commonjs"],
            },
        }),
        commonjs()
        // ...
    ],
    // ...
});