chenquincy · ruofee · Mar 17, 2022 · Mar 18, 2022
diff --git a/build/ViteSingleCssPlugin.js b/build/ViteSingleCssPlugin.js
@@ -0,0 +1,29 @@
+let packageNames = []
+let viteConfig
+let IIFEcss
+
+// 将 css 打包到 js 文件中
+export default function() {
+  return {
+    apply: 'build',
+    enforce: 'post',
+    name: 'pack-css',
+    configResolved(config) {
+      viteConfig = config
+      packageNames = viteConfig.build.lib.formats.map(format => viteConfig.build.lib.fileName(format))
+    },
+    generateBundle(_, bundle) {
+      const cssFileName = 'style.css'
+      const { [cssFileName]: cssBundle } = bundle
+      if (cssBundle) {
+        IIFEcss = `(function() {try {var elementStyle = document.createElement('style');elementStyle.innerText = ${JSON.stringify(cssBundle.source)};document.head.appendChild(elementStyle);} catch(error) {console.error(error, 'unable to concat style inside the bundled file')}})()`
+        delete bundle[cssFileName]
+      }
+      packageNames.forEach(packageName => {
+        if (bundle[packageName]) {
+          bundle[packageName].code += IIFEcss
+        }
+      })
+    }
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue-dynamic-form-component</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/dev/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -18,12 +18,19 @@
     "url": "https://github.com/chenquincy/vue-dynamic-form-component"
   },
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build --target lib --dest lib --name vue-dynamic-form-component ./packages/index.js",
+    "dev": "vite",
+    "build": "vite build",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs"
   },
-  "main": "./lib/vue-dynamic-form-component.umd.min.js",
+  "main": "./lib/vue-dynamic-form-component.umd.js",
+  "module": "./lib/vue-dynamic-form-component.es.js",
+  "exports": {
+    ".": {
+      "import": "./lib/vue-dynamic-form-component.es.js",
+      "require": "./lib/vue-dynamic-form-component.umd.js"
+    }
+  },
   "typings": "types/index.d.ts",
   "vetur": {
     "tags": "vetur/tags.json",
@@ -44,7 +51,11 @@
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "node-sass": "^4.9.0",
+    "sass": "^1.49.9",
     "sass-loader": "^7.1.0",
+    "vite": "^2.8.6",
+    "vite-plugin-eslint": "^1.3.0",
+    "vite-plugin-vue2": "^1.9.3",
     "vue": "^2.6.10",
     "vue-template-compiler": "^2.6.10",
     "vuepress": "^1.0.1",

diff --git a/packages/dynamic-form-item/form-item.vue b/packages/dynamic-form-item/form-item.vue
@@ -102,7 +102,7 @@
 
 <script>
 import { isComplexType, getLabelWidth, darkenColor, parseDescriptor, findTypeDescriptor } from '../utils'
-import DynamicInput from '../dynamic-input/input'
+import DynamicInput from '../dynamic-input/input.vue'
 
 export default {
   name: 'dynamic-form-item',

diff --git a/packages/dynamic-form/form.vue b/packages/dynamic-form/form.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import DynamicFormItem from '../dynamic-form-item/form-item'
+import DynamicFormItem from '../dynamic-form-item/form-item.vue'
 import { isComplexType, getLabelWidth, findTypeDescriptor } from '../utils'
 import i18n from '../i18n'
 

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue, { VueConstructor } from 'vue'
 
 export type ComponentSize = 'large' | 'medium' | 'small' | 'mini'
 
@@ -43,4 +43,12 @@ declare class DynamicForm extends Vue {
   clearValidate (): void
 }
 
-export default DynamicForm
+export {
+  DynamicForm
+}
+
+declare const _default: {
+  install(Vue: VueConstructor): void
+};
+
+export default _default
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+import VitePluginEslint from 'vite-plugin-eslint'
+import path from 'path'
+import singleCssPlugin from './build/ViteSingleCssPlugin';
+import { name as packageName } from './package.json'
+
+export default defineConfig({
+  build: {
+    outDir: path.resolve(__dirname, './lib'),
+    lib: {
+      entry: path.resolve(__dirname, './packages/index.js'),
+      name: packageName,
+      formats: ['umd', 'es', 'cjs'],
+      fileName: format => {
+        return `${packageName}.${format}.js`;
+      }
+    },
+    rollupOptions: {
+      external: ['vue', 'element-ui'],
+      output: {
+        globals: {
+          vue: 'Vue',
+          'element-ui': 'Element'
+        },
+        exports: 'named'
+      }
+    }
+  },
+  plugins: [
+    createVuePlugin(),
+    singleCssPlugin(),
+    VitePluginEslint({
+      include: ['packages/**/*.js', 'packages/**/*.vue']
+    })
+  ]
+})