有没有办法将 Storybook 配置为使用与我的主应用程序相同的 Vite 配置？

Question

我的应用程序堆栈是 Node14、Vite、Typescript、Vue3、UnoCSS（Antfu 的 Vitesse）。我使用 Storybook 6.5 alpha for Vue3 和 Storybook-builder-vite 插件。

我的目标是我的 Storybook 配置和堆栈与应用程序相同，因此 Storybook 将准确反映已实现的组件。单独维护这些配置将使它们很难保持同步。

有没有办法简化这个？

vite.config.ts：

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import generateSitemap from 'vite-ssg-sitemap'
import Layouts from 'vite-plugin-vue-layouts'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Markdown from 'vite-plugin-md'
import { VitePWA } from 'vite-plugin-pwa'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import Inspect from 'vite-plugin-inspect'
import Prism from 'markdown-it-prism'
import LinkAttributes from 'markdown-it-link-attributes'
import Unocss from 'unocss/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { FileSystemIconLoader } from 'unplugin-icons/loaders' 

const markdownWrapperClasses = 'prose prose-sm m-auto text-left'

export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/],
    }),

    // https://github.com/hannoeru/vite-plugin-pages
    Pages({
      extensions: ['vue', 'md'],
    }),

    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
    Layouts(),

    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'vue-i18n',
        '@vueuse/head',
        '@vueuse/core',
      ],
      dts: 'src/auto-imports.d.ts',
    }),

    // https://github.com/antfu/unplugin-vue-components
    Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: 'src/components.d.ts',
      resolvers: [
        IconsResolver({
          customCollections: [
            'fab',
            'fas',
            'far',
            'fal',
            'fat',
            'fad',
          ]
        }),
      ]
    }),

    Icons({
      compiler: 'vue3',
      customCollections: {
        'fab': FileSystemIconLoader(
          './src/core/assets/icons/font-awesome/brands',
          svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
        ),  
        'fas': FileSystemIconLoader(
          './src/core/assets/icons/font-awesome/solid',
          svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
        ),  
        'far': FileSystemIconLoader(
          './src/core/assets/icons/font-awesome/regular',
          svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
        ),  
        'fal': FileSystemIconLoader(
          './src/core/assets/icons/font-awesome/light',
          svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
        ),  
        'fat': FileSystemIconLoader(
          './src/core/assets/icons/font-awesome/thin',
          svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
        ),  
        'fad': FileSystemIconLoader(
          './src/core/assets/icons/font-awesome/duotone',
          svg => svg.replace(/<path /g, '<path fill="currentColor" ')
        ),  
      }
    }),
    // https://github.com/antfu/unocss
    // see unocss.config.ts for config
    Unocss(),


    // https://github.com/antfu/vite-plugin-md
    // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
    Markdown({
      wrapperClasses: markdownWrapperClasses,
      headEnabled: true,
      markdownItSetup(md) {
        // https://prismjs.com/
        md.use(Prism)
        md.use(LinkAttributes, {
          matcher: (link: string) => /^https?:\/\//.test(link),
          attrs: {
            target: '_blank',
            rel: 'noopener',
          },
        })
      },
    }),

    // https://github.com/antfu/vite-plugin-pwa
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
      manifest: {
        name: 'Vitesse',
        short_name: 'Vitesse',
        theme_color: '#ffffff',
        icons: [
          {
            src: '/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable',
          },
        ],
      },
    }),

    // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
    VueI18n({
      runtimeOnly: true,
      compositionOnly: true,
      include: [path.resolve(__dirname, 'locales/**')],
    }),

    // https://github.com/antfu/vite-plugin-inspect
    // Visit http://localhost:3333/__inspect/ to see the inspector
    Inspect(),
  ],

  // https://github.com/antfu/vite-ssg
  ssgOptions: {
    script: 'async',
    formatting: 'minify',
    onFinished() { generateSitemap() },
  },

  optimizeDeps: {
    include: [
      'vue',
      'vue-router',
      '@vueuse/core',
      '@vueuse/head',
    ],
    exclude: [
      'vue-demi',
    ],
  },

  // https://github.com/vitest-dev/vitest
  test: {
    include: ['test/**/*.test.ts'],
    environment: 'jsdom',
    deps: {
      inline: ['@vue', '@vueuse', 'vue-demi'],
    },
  },
})

UnoCSS.config.ts：

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  shortcuts: [
    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
  ],
  presets: [
    presetUno(),
    // presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
        // ...
      },
    }),
    presetTypography(),
    // presetWebFonts({
    //   // provider: 'google',
    //   // fonts: {
    //   //   sans: ['Hind:300,400,500,600,700'],
    //   //   serif: ['Roboto Slab:200,300,400,500,600,700']
    //   // }
    // }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
  safelist: 'prose prose-sm m-auto text-left'.split(' '),
  theme: {
    fontFamily: {
      serif: ['"Roboto Slab"', 'serif'],
      sans: ['"Hind"', 'sans-serif'],
    },
  },
})

.storybook/main.ts：

const { resolve } = require('path');
const Inspect = require('vite-plugin-inspect');
const Unocss = require('unocss/vite').default;

import {
  defineConfig,
} from 'unocss'

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-designs"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "storybook-builder-vite"
  },
  async viteFinal(config, { configType }) {
    console.log(defineConfig)
    config.resolve.alias = {
      ...config.resolve.alias,
      '~': resolve(__dirname, 'src')
    };
    config.resolve.modules = [resolve(__dirname, '@', '../src'), 'node_modules'];
    config.plugins = config.plugins ?? [];
    config.plugins.push(Unocss())
    config.plugins.push(Inspect());
    return config;
  }
}

我知道代码需要有所不同，因为故事书配置会修改现有配置而不是创建新配置，但我想知道是否可以批量导入 unocss 配置。

我还遇到导入问题，因为 IIUC 故事书使用 commonjs，而我的其他配置文件使用 ts/esm ——“无法在模块外部使用导入”，而异步导入似乎会导致构建错误。

任何人？