解决 Storybook、Vite 和 Vue2 中 `apple-mapkit-js` 导入问题

## 使用 Storybook、Vite 和 Vue2 时如何导入 apple-mapkit-js

前言：

使用 apple-mapkit-js 构建地理位置相关的 Vue 应用程序时，在 Storybook 和 Vite 环境下，导入 apple-mapkit-js 可能会出现错误。本指南将深入探讨如何解决此问题。

## 问题

在使用 Storybook 和 Vite 时，导入 apple-mapkit-js 会导致以下错误：

• 浏览器：MIME 类型阻止导入
• 终端：无法解析 xmlhttprequest 模块

## 解决方法

1. 检查 Vite 配置

确保 vite.config.js 配置文件中包含以下内容：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';

export default defineConfig({
  plugins: [
    vue(),
    viteCommonjs(),
  ],
});

此配置允许 Vite 处理 CommonJS 模块，例如 apple-mapkit-js。

2. 使用绝对路径导入

将 apple-mapkit-js 的导入修改为使用绝对路径：

import "https://unpkg.com/apple-mapkit-js@latest/dist/apple-mapkit.min.js";

3. 添加 xmlhttprequest 依赖项

在项目根目录下安装 xmlhttprequest 依赖项：

npm install xmlhttprequest --save-dev

此操作使 Vite 能够解析 xmlhttprequest 模块。

4. 更新 Storybook 配置

将 Storybook 配置文件（通常是 .storybook/main.js）中的 source 字段更新为指向构建输出文件夹：

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [],
  core: {
    builder: "vite",
  },
  features: {
    storyStoreV7: true,
  },
  framework: "@storybook/vue3",
  viteOptions: {
    build: {
      target: "esnext",
      outDir: "../dist",
    },
  },
};

此操作指示 Storybook 使用构建输出中的文件，其中包含已处理的 apple-mapkit-js 导入。

## 其他建议

• 使用 Storybook 和 Vite 的最新版本。
• 清除浏览器缓存并重新加载页面。
• 创建一个新 Storybook 项目并导入 apple-mapkit-js，以排除特定项目配置问题。

## 结论

通过遵循上述步骤，可以在使用 Storybook、Vite 和 Vue2 时成功导入 apple-mapkit-js。问题通常源于 Vite 配置、Storybook 配置或缺少依赖项。

## 常见问题解答

1. 为什么需要使用绝对路径导入 apple-mapkit-js？
   因为 Vite 需要知道导入模块的完整路径。

2. 为什么需要安装 xmlhttprequest 依赖项？
   因为 apple-mapkit-js 依赖于 xmlhttprequest 模块。

3. 如何更新 Storybook 配置以指向构建输出？
   在 Storybook 配置文件中，将 source 字段更新为 ../dist，即构建输出文件夹。

4. 如何清除浏览器缓存？
   按下 Ctrl + Shift + R（Windows）或 Command + Shift + R（Mac）。

5. 如何排除特定项目配置问题？
   创建新 Storybook 项目时，可以排除任何特定项目配置问题。