@xccjh/common-ui-resolver

前言

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

安装

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

使用

$3

`shell
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配置一致
}),
],
}),
],
}
}
`

$3

`shell
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: /~\//,
replacement: path.resolve('packages') + '/', // 👈 开发模式特定配置，指定分包workspace目录
},
],
},
}
}
``