diff --git a/packages/components/package.json b/packages/components/package.json
index 2a1502b7..3c84c5cf 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -16,10 +16,11 @@
"types": "es/index.d.ts",
"exports": {
".": {
- "import": "./index.js",
- "require": "./index.js",
+ "import": "./es/index.js",
+ "require": "./lib/index.js",
"types": "./es/index.d.ts"
},
+ "./dist": "./dist/",
"./theme-chalk": "./theme-chalk/",
"./es": "./es/index.js",
"./es/*": "./es/*.js",
diff --git a/packages/dk-eslint/index.js b/packages/dk-eslint/index.js
index ae65d510..8975f92d 100644
--- a/packages/dk-eslint/index.js
+++ b/packages/dk-eslint/index.js
@@ -332,7 +332,7 @@ module.exports = {
{
files: '*',
globals: {
- __DEV__: 'readonly'
+ isDev: 'readonly'
}
}
]
diff --git a/play/main.ts b/play/main.ts
index 9994dfc9..4a62af97 100644
--- a/play/main.ts
+++ b/play/main.ts
@@ -10,10 +10,12 @@ import javascript from 'highlight.js/lib/languages/javascript'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
hljs.registerLanguage('javascript', javascript)
-
+//本地开发时，使用本地的组件库
import dkPlus from 'dk-plus'
import '@dk-plus/theme-chalk'
-
+// 打包后测试时，使用打包后的组件库
+// import dkPlus from '../dist'
+// import '../dist/dist/index.css'
const app = createApp(App)
app.use(router)
app.use(dkPlus)
diff --git a/play/vite.config.ts b/play/vite.config.ts
index 190a758a..31300518 100644
--- a/play/vite.config.ts
+++ b/play/vite.config.ts
@@ -7,6 +7,7 @@ import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { visualizer } from 'rollup-plugin-visualizer'
+import { resolve } from 'path'
export default defineConfig({
base: './',
plugins: [
@@ -70,5 +71,10 @@ export default defineConfig({
rewrite: path => path.replace(/^\/api/, '')
}
}
+ },
+ resolve: {
+ alias: {
+ 'dk-plus': resolve(__dirname, '../packages/components/index.ts')
+ }
}
})
diff --git a/vite.config.css.ts b/vite.config.css.ts
index 3663873e..cf8028ff 100644
--- a/vite.config.css.ts
+++ b/vite.config.css.ts
@@ -1,46 +1,48 @@
import { resolve } from 'path'
+import autoprefixer from 'autoprefixer'
import { readdirSync } from 'fs'
-import postcssPresetEnv from 'postcss-preset-env' //
-import autoprefixer from 'autoprefixer' //
+import postcssPresetEnv from 'postcss-preset-env'
import type { UserConfigExport } from 'vite'
-
-const input: string = resolve(__dirname, 'packages/theme-chalk/src')
-
+const BringIn: string = resolve(__dirname, 'packages/theme-chalk/src')
export default (): UserConfigExport => {
return {
css: {
postcss: {
- plugins: [
- /**
- * 针对一些前沿的 css 进行降级
- *
- * @see postcss-preset-env https://www.npmjs.com/package/postcss-preset-env
- */
- postcssPresetEnv(),
- /**
- * 自动添加浏览器厂商前缀
- *
- * @see autoprefixer https://www.npmjs.com/package/autoprefixer
- */
- autoprefixer()
- ]
+ /**
+ * @name postcssPresetEnv
+ * @see postcss-preset-env https://www.npmjs.com/package/postcss-preset-env
+ * @description 针对一些前沿的 css 进行降级处理
+ */
+ /**
+ * @name autoprefixer
+ * @see autoprefixer https://www.npmjs.com/package/autoprefixer
+ * @description 为 CSS 添加浏览器前缀 -o -ms -moz -webkit 等等
+ */
+ plugins: [postcssPresetEnv(), autoprefixer()]
},
-
preprocessorOptions: {
+ /**
+ * @see css.preprocessorOptions https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions
+ * @description 所有预处理器选项还支持 additionalData 选项，可以用于为每个样式内容注入额外代码。请注意，如果注入的是实际的样式而不仅仅是变量时，那么这些样式将会在最终的打包产物中重复出现。
+ */
scss: {
additionalData: '$injectedColor: orange;'
}
},
-
modules: {
+ /**
+ * @see css.modules https://cn.vitejs.dev/config/shared-options.html#css-modules
+ * @description 启用 CSS 模块
+ */
+
scopeBehaviour: 'local'
}
},
build: {
assetsDir: 'theme-chalk',
rollupOptions: {
- input: readdirSync(input).map((name): string => {
- return `${input}/${name}`
+ input: readdirSync(BringIn).map((name): string => {
+ return `${BringIn}/${name}`
}),
output: {
entryFileNames: 'theme-chalk/[name].js',
diff --git a/vite.config.theme.ts b/vite.config.theme.ts
index 6879faa5..01a17389 100644
--- a/vite.config.theme.ts
+++ b/vite.config.theme.ts
@@ -6,6 +6,16 @@ import type { UserConfigExport } from 'vite'
export default (): UserConfigExport => {
return {
css: {
+ /**
+ * @name postcssPresetEnv
+ * @see postcss-preset-env https://www.npmjs.com/package/postcss-preset-env
+ * @description 针对一些前沿的 css 进行降级处理
+ */
+ /**
+ * @name autoprefixer
+ * @see autoprefixer https://www.npmjs.com/package/autoprefixer
+ * @description 为 CSS 添加浏览器前缀 -o -ms -moz -webkit 等等
+ */
postcss: {
plugins: [postcssPresetEnv(), autoprefixer()]
}
@@ -16,6 +26,11 @@ export default (): UserConfigExport => {
rollupOptions: {
input: resolve(__dirname, 'packages/theme-chalk/index.scss'),
output: {
+ /**
+ * 取消文件名 hash 值
+ * @see output.assetFileNames https://rollupjs.org/guide/en/#outputassetfilenames
+ * @description 为了避免在每次更改文件时都会更改文件名，可以使用 assetFileNames 选项来控制文件名的生成方式。默认情况下，它们是根据内容哈希生成的，但是您可以使用以下占位符来控制它们的生成方式：
+ */
assetFileNames: '[name].[ext]'
}
}
diff --git a/vite.config.ts b/vite.config.ts
index 5f9eac5a..7be1c3c8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,62 +6,105 @@ import { name, version } from './packages/components/package.json'
import type { UserConfigExport } from 'vite'
export default (): UserConfigExport => {
+ /**
+ * @see define https://cn.vitejs.dev/config/shared-options.html#define
+ * @description 修改默认配置
+ */
return {
define: {
- /** 检测是否为生产环境 */
- __DEV__: process.env.NODE_ENV !== 'production'
+ isDev: process.env.NODE_ENV !== 'production'
},
/**
* 插件配置
*
* @see plugins https://cn.vitejs.dev/config/shared-options.html#plugins
+ * @description 插件配置 插件是一个函数或者是一个包含 { apply } 的对象。
*/
plugins: [
/**
- * vue 插件
- *
* @see vite-plugin-vue https://github.com/vitejs/vite-plugin-vue
+ * @description vue 插件
*/
vue(),
/**
- * 打包类型
- *
* @see vite-plugin-dts https://github.com/qmhc/vite-plugin-dts
+ * @skipDiagnostics 是否跳过类型诊断
+ * @staticImport 是否将动态引入转换为静态
+ * @outputDir 可以指定一个数组来输出到多个目录中
+ * @insertTypesEntry 是否生成类型声明入口
+ * @cleanVueFileName 是否将 '.vue.d.ts' 文件名转换为 '.d.ts'
+ * @copyDtsFiles 是否将源码里的 .d.ts 文件复制到 outputDir
+ * @include 手动设置包含路径的 glob
+ * @afterBuild 构建后回调钩子
+ * @description vite 插件，用于打包类型声明文件
*/
dts({
- skipDiagnostics: true /** 是否跳过类型诊断 */,
- staticImport: true /** 是否将动态引入转换为静态 */,
- outputDir: ['./dist/lib', './dist/es'] /** 可以指定一个数组来输出到多个目录中 */,
- insertTypesEntry: true /** 是否生成类型声明入口 */,
- cleanVueFileName: true /** 是否将 '.vue.d.ts' 文件名转换为 '.d.ts' */,
- copyDtsFiles: true /** 是否将源码里的 .d.ts 文件复制到 outputDir */,
- include: ['./packages/components'] /** 手动设置包含路径的 glob */,
- /** 构建后回调钩子 */
+ skipDiagnostics: true,
+ staticImport: true,
+ outputDir: ['./dist/lib', './dist/es'],
+ insertTypesEntry: true,
+ cleanVueFileName: true,
+ copyDtsFiles: true,
+ include: ['./packages/components'],
afterBuild: (): void => {
move()
}
})
],
- css: {},
-
+ /**
+ * @see 构建选项 https://cn.vitejs.dev/config/build-options.html
+ * @target 这是指 支持原生 ES 模块、原生 ESM 动态导入
+ * @minify 压缩代码
+ * @chunkSizeWarningLimit 打包的组件超过 2kb 警告提示
+ * @reportCompressedSize 启用 gzip 压缩大小报告
+ * @emptyOutDir 是否清空输出目录
+ * @outDir 指定输出路径
+ * @lib.name 包名
+ * @lib.entry 打包入口
+ * @description 构建配置项
+ */
build: {
- target: 'modules' /** 这是指 支持原生 ES 模块、原生 ESM 动态导入 */,
- minify: true /** 压缩代码 */,
- chunkSizeWarningLimit: 2 /** 打包的组件超过 2kb 警告提示 */,
- reportCompressedSize: true /** 启用 gzip 压缩大小报告 */,
+ target: 'modules',
+ minify: true,
+ chunkSizeWarningLimit: 2,
+ reportCompressedSize: true,
emptyOutDir: false,
- outDir: resolve(__dirname, './dist') /** 指定输出路径 */,
-
+ outDir: resolve(__dirname, './dist'),
lib: {
- name: 'dk-plus' /** 包名 */,
- entry: resolve(__dirname, 'packages/components/index.ts') /** 打包入口 */
+ name: 'dkPlus',
+ entry: resolve(__dirname, 'packages/components/index.ts')
},
-
rollupOptions: {
+ /**
+ * @see external https://rollupjs.org/guide/en/#external
+ * @name 包名字
+ * @format 包的格式
+ * @see output.format https://rollupjs.org/guide/en/#outputformat
+ * @exports 指定导出的方式
+ * @see output.exports https://rollupjs.org/guide/en/#outputexports
+ * @sourcemap 是否生成 sourcemap
+ * @see output.outputsourcemap https://rollupjs.org/guide/en/#outputsourcemap
+ * @dir 指定输出目录
+ * @see output.outputdir https://rollupjs.org/guide/en/#outputdir
+ * @entryFileNames 指定入口文件名
+ * @see output.outputentryfilenames https://rollupjs.org/guide/en/#outputentryfilenames
+ * @chunkFileNames 指定块文件名
+ * @see output.outputchunkfilenames https://rollupjs.org/guide/en/#outputchunkfilenames
+ * @assetFileNames 指定资源文件名
+ * @see output.outputassetfilenames https://rollupjs.org/guide/en/#outputassetfilenames
+ * @manualChunks 手动指定块
+ * @see output.outputmanualchunks https://rollupjs.org/guide/en/#outputmanualchunks
+ * @inlineDynamicImports 是否内联动态导入
+ * @see output.outputinlinedynamicimports https://rollupjs.org/guide/en/#outputinlinedynamicimports
+ * @globals 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+ * @namespaceToStringTag 为命名空间提供 toStringTag
+ * @see output.outputnamespacetostringtag https://rollupjs.org/guide/en/#outputnamespacetostringtag
+ * @description 外部化处理那些你不想打包进库的依赖
+ */
external: ['vue'],
output: [
{
- name: 'dk-plus' /** 包名 */,
+ name: 'dkPlus',
format: 'umd',
exports: 'named',
sourcemap: false,
@@ -73,30 +116,20 @@ export default (): UserConfigExport => {
inlineDynamicImports: false,
globals: {
vue: 'Vue'
- } /** 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 */,
+ },
namespaceToStringTag: true
},
{
format: 'es',
-
exports: 'named',
-
dir: 'dist/es',
-
sourcemap: false,
-
entryFileNames: 'index.js',
-
chunkFileNames: '[name].js',
-
assetFileNames: '[name].[ext]',
-
inlineDynamicImports: false,
-
manualChunks: undefined,
-
preserveModules: true,
-
namespaceToStringTag: true
},
{
@@ -130,5 +163,5 @@ const move = (): void => {
copyFileSync(item.input, item.outDir)
})
- console.warn('\n' + `${name} ${version} 版本打包成功~~~` + '\n')
+ console.warn('\n' + `${name} ${version} 版本打包成功🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇` + '\n')
}