@94ai/common-ui-resolver

前言

94智能公共库（@94ai/common-ui）自动导包工具

安装

$ yarn add @94ai/common-ui-resolver

使用

使用组件库模式

import { ConfigEnv, UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue2'
import Components from 'unplugin-vue-components/vite'
import { NfCommonUIResolver } from '@94ai/common-ui-resolver'

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      Components({
        resolvers: [
          ...NfCommonUIResolver({ // 👈 @94ai/common-ui自动import,直接放到resolvers数组中即可
            importStyle: 'sass', //  是否开启使用组件库内的sass，和传统的babel配置一致
          }),
        ],
      }),
    ],
  }
}

开发组件库模式

import { ConfigEnv, splitVendorChunkPlugin, UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue2'
import legacy from '@vitejs/plugin-legacy'
import Components from 'unplugin-vue-components/vite'
import { ElementUiResolver } from 'unplugin-vue-components/resolvers'
import { viteMockServe } from 'vite-plugin-mock'
import Markdown from 'vite-plugin-md'
import markdownItcontainer from 'markdown-it-container'
import markdownItAnchor from 'markdown-it-anchor'
import markdowIToDoneRight from 'markdown-it-toc-done-right'
import code from '@yankeeinlondon/code-builder'
import link from '@yankeeinlondon/link-builder'
import meta from '@yankeeinlondon/meta-builder'
import path from 'path'
import vueJsx from '@vitejs/plugin-vue2-jsx'
import { getRender, getValidator, slugify, wrap } from './utils/strip-tags'
import MarkdownIt from 'markdown-it'
import { NfCommonUIResolver } from './utils/nf-common-ui-resolver'

export default ({ command, mode }: ConfigEnv): UserConfigExport => { // 
  return {
    // 托管设置
    server: {
      host: true,
      port: 288,
    },
    // 第三方主题设置
    css: {
      devSourcemap: true,
      preprocessorOptions: {
        scss: {
          additionalData: '',
        },
        less: {
          modifyVars: {
            'primary-color': '#1177ff',
          },
          javascriptEnabled: true,
        },
      },
    },
    plugins: [
      // vue+jsx+md
      vue({
        include: [/\.vue$/, /\.md$/, /\.jsx$/, /\.tsx$/],
      }),
      vueJsx(),
      Components({
        include: [
          /\.vue$/,
          /\.vue\?vue/,
          /\.md$/,
          /\.md\?vue/,
          /\.jsx$/,
          /\.jsx\?vue/,
          /\.tsx$/,
          /\.tsx\?vue/,
        ],
        extensions: ['vue', 'md', 'jsx', 'tsx'],
        dirs: ['src/components', 'src/views', 'doc'], // 文档+组件+边缘组件（如外框）自动import
        resolvers: [
          ElementUiResolver({ // element-ui自动import
            importStyle: 'sass',
          }),
          ...NfCommonUIResolver({ // 👈 @94ai/common-ui自动import
            importStyle: 'sass',
            mode, // 👈 【开发组件库模式】 相对 【使用组件库模式】，多了一个模式配置参数，mode为非development即可，如vite --mode=packages(指向你的分包workspace目录即可)
          }),
        ],
      }),
      // 数据mock
      viteMockServe({
        mockPath: 'mock',
        localEnabled: command === 'serve',
        prodEnabled: false,
        injectCode: `
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `,
      }),
      // 代码分割
      splitVendorChunkPlugin(),
      // 代码垫片
      legacy({
        targets: {
          chrome: '58',
        },
      }),
      // 自定义md容器
      Markdown({
        markdownItOptions: {
          html: true,
          xhtmlOut: true,
          typographer: true,
        },
        headEnabled: true,
        builders: [
          link(),
          meta(),
          code({
            theme: 'duotone',
            before: (fence) => {
              return fence
            },
          }),
        ],
        markdownItSetup: (md) => {
          // md.renderer.rules.html_block = wrap(md.renderer.rules.html_block)
          md.renderer.rules.text = wrap(md.renderer.rules.text)
          // md.renderer.rules.fence = wrap(md.renderer.rules.fence)
          return ['demo', 'tip', 'warning', 'danger', 'info']
            .reduce((previousValue: MarkdownIt, currentValue: string) => {
              return previousValue.use(markdownItcontainer, currentValue, {
                validate: getValidator(currentValue),
                render: getRender(currentValue, previousValue),
              })
            }, md)
            .use(markdowIToDoneRight, {
              slugify,
              format(s: string) {
                // 选中{#和 }之间的内容
                return `${s}`.replace(/(\s*{#)(.*?)(})/g, '')
              },
            })
            .use(markdownItAnchor, {
              // permalink: markdownItAnchor.permalink.headerLink({
              //   renderHref(slug: string) {
              //     return slug
              //   },
              //   renderAttrs(slug: string) {
              //     return {
              //       dta: slug,
              //     }
              //   },
              // }),
              // getTokensText(tokens: Token[]) {
              //   return tokens
              //     .filter((t: Token) => {
              //       return ['text', 'code_inline'].includes(t.type)
              //     })
              //     .map((t: Token) => {
              //       if (t.content) {
              //         t.content = t.content.replace(/(\s*{#)(.*?)(})/g, '')
              //       }
              //       return t.content
              //     })
              //     .join('')
              // },
              // callback: (token: Token, anchor_info: AnchorInfo) => {
              //   const reg = /(\s*{#)(.*?)(})/g
              //   token.content = token.content.replace(reg, '')
              // },
              permalink: true,
              permalinkBefore: true,
              permalinkSymbol: '',
              slugify,
            })
          // .use(markdownItAttrs)
        },
      }),
    ],
    // 文档部署
    base: process.env.NODE_ENV === 'production' ? '/common-ui/' : '',
    // 构建配置
    build: {
      // commonjsOptions: {
      //   esmExternals: true,
      // },
      target: 'es2015',
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        output: {
          manualChunks: {
            'element-ui': ['element-ui'],
          },
        },
      },
    },
    // 别名配置
    resolve: {
      alias: [
        {
          find: /^@\//,
          replacement: path.resolve('src') + '/',
        },
        {
          find: /^packages\//,
          replacement: path.resolve('packages') + '/', // 👈 开发模式特定配置，指定分包workspace目录，如vite --mode=packages
        },
      ],
    },
  }
}