如何让 Vite 不导入/捆绑外部依赖

Question

我有几个库，我被迫通过<script>标签包含它们。但是，我仍然希望在 .ts 中对这些外部库使用等效的导入语句，以便获得正确的输入。我如何告诉 Vite 不要捆绑这些特定的导入，并删除它们的导入语句？

Answer 1

这比应有的要困难得多，但由于 rollup -plugin-hypothetical插件和 rollup-plugin-postprocess插件的特定分支，我终于找到了一种忽略捆绑包中外部包含的库的方法。Rollup 插件与 Vite 兼容。假设的插件从捆绑包中删除代码，而后处理插件允许您通过正则表达式从捆绑包中删除导入。请注意，我将删除所有导入 - 如果您只需要删除一些导入，那么您的后处理正则表达式将会有所不同。

使用 npm 安装插件：

npm install --save-dev rollup-plugin-hypothetical
npm install --save-dev @stadtlandnetz/rollup-plugin-postprocess

示例 vite.config.js 包含我想要排除的 3 个节点模块：

// vite.config.js

import hypothetical from 'rollup-plugin-hypothetical';
import postprocess from '@stadtlandnetz/rollup-plugin-postprocess';

export default {
    build: {
        rollupOptions: {
            external: ['masonry-layout', 'typeahead-standalone', 'video.js']
        }
    },
    plugins: [
        hypothetical({
            allowFallthrough: true,
            files: {
                'typeahead-standalone/': ``,
                'masonry-layout/': ``,
                'video.js/': ``
            }
        }),
        postprocess([
            [/import[^;]*/, '']
        ])
    ]
}