如何将模块添加到 build.rollupOptions.external？

Question

我正在尝试让 Algolia InstantSearch.js 与我的 Svelte 网站一起使用。当我尝试在 Netlify 上部署它时，出现以下错误：

9:27:35 PM: [vite]: Rollup failed to resolve import "instantsearch.js/es/widgets.js" from "src/components/Search/SearchSection.svelte".
9:27:35 PM: This is most likely unintended because it can break your application at runtime.
9:27:35 PM: If you do want to externalize this module explicitly add it to
9:27:35 PM: `build.rollupOptions.external`
9:27:35 PM: > [vite]: Rollup failed to resolve import "instantsearch.js/es/widgets.js" from "src/components/Search/SearchSection.svelte".
9:27:35 PM: This is most likely unintended because it can break your application at runtime.
9:27:35 PM: If you do want to externalize this module explicitly add it to
9:27:35 PM: `build.rollupOptions.external`

这就是我在组件中导入这些模块的方法：

import algoliasearch from 'algoliasearch/lite.js';
import instantsearch from 'instantsearch.js';
import { searchBox, hits, index } from 'instantsearch.js/es/widgets.js';

这是我的svelte.config.js：

import fs from "fs";
import path from "path";
import adapterStatic from "@sveltejs/adapter-static";
import svg from "vite-plugin-svgstring";
import dsv from "@rollup/plugin-dsv";
import sveltePreprocess from "svelte-preprocess";
import autoprefixer from "autoprefixer";
import { indexAlgolia } from 'svelte-algolia/server-side'
import 'dotenv/config' // optional

const { thedivtagguy } = JSON.parse(fs.readFileSync("package.json", "utf8"));
const dev = process.env.NODE_ENV === "development";
const dir = thedivtagguy ? thedivtagguy.subdirectory : "";
const prefix = dir.startsWith("/") ? "" : "/";
const base = dev || !dir ? "" : `${prefix}${dir}`;

const preprocess = sveltePreprocess({
  postcss: {
    plugins: [autoprefixer]
  }
});

const config = {
  preprocess,
  kit: {
    adapter: adapterStatic(),
    target: "#svelte",
    vite: {
      resolve: {
        alias: {
          $actions: path.resolve("./src/actions"),
          $components: path.resolve("./src/components"),
          $data: path.resolve("./src/data"),
          $stores: path.resolve("./src/stores"),
          $styles: path.resolve("./src/styles"),
          $svg: path.resolve("./src/svg"),
          $utils: path.resolve("./src/utils")
        }
      },
      plugins: [dsv(), svg()],
    },
    paths: {
      base
    }
  }
};

export default config;

这是rollup.config.js：

import sveltePreprocess from "svelte-preprocess";
import svelte from "rollup-plugin-svelte";
import geojson from 'rollup-plugin-geojson';
import { mdsvex } from "mdsvex";
const production = !process.env.ROLLUP_WATCH;

preprocess: sveltePreprocess({
  sourceMap: !production,
  postcss: {
    plugins: [require("tailwindcss"), require("autoprefixer")]
  }
});

export default {
  plugins: [
    svelte({
            // tell svelte to handle mdsvex files
            extensions: [".svelte", ".svx"],
            preprocess: mdsvex()
        }),
    geojson()
  ],
};

我到底如何以及在哪里“显式地外部化这个模块”？我找不到任何好的文档。

Answer 1

您是否尝试过kit.vite.optimizeDeps.exclude使用svelte.config.js

const config = {
  preprocess,
  kit: {
    // other options ....
    vite: {
      // other options ....
      optimizeDeps:{
        exclude: ['instantsearch.js']
      },
      // in case you want to interact with rollup you can use
       build:{
        rollupOptions:{
          
        }
      }
    }
  }
};