wip: switched to vite. todo: vite should support css.extract=false

#137 vitejs/vite#4345 vitejs/vite#9086
fritx · Aug 9, 2022 · 37ca4e0 · 37ca4e0
1 parent 65ae48f
commit 37ca4e0
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -47,7 +47,8 @@ npm i vue1-at  # for Vue1 (branch vue1-new)
 </template>
 
 <script>
-import At from 'vue-at'
+import 'vue-at/dist/style.css' // import style
+import At from 'vue-at' // import components
 
 export default {
   components: { At },
@@ -90,6 +91,7 @@ With Textarea, `v-model` should be bound in `<textarea>` itself.
 </template>
 
 <script>
+import 'vue-at/dist/style.css' // import style
 // import At from 'vue-at' // for content-editable
 import AtTa from 'vue-at/dist/vue-at-textarea' // for textarea
 

diff --git a/index.html b/index.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <title>vue-at</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo: vue-at</title>
   </head>
   <body>
     <div id="app"></div>
-    <script src="dist/demo.js"></script>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -5,16 +5,15 @@
   "author": "Fritz Lin <uxfritz@163.com>",
   "repository": "https://github.com/fritx/vue-at",
   "scripts": {
-    "lint:fix": "vue-cli-service lint",
-    "lint": "vue-cli-service lint --no-fix",
-    "dev:dist": "vue-cli-service serve --skip-plugins eslint",
-    "dev": "vue-cli-service serve",
-    "build:at": "vue-cli-service build ./src/At.vue --target lib --name vue-at",
-    "build:at-ta": "vue-cli-service build ./src/AtTextarea.vue --target lib --name vue-at-textarea",
-    "build": "rimraf dist && run-p build:at build:at-ta && rimraf dist/demo.html",
+    "lint:fix": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore src",
+    "dev": "vite --config vite.demo.config.js",
+    "build": "rimraf dist && run-s build:at build:at-ta",
+    "build:at": "vite build --config vite.config.1.js",
+    "build:at-ta": "vite build --config vite.config.2.js",
     "prepublish": "npm run build"
   },
-  "main": "dist/vue-at.common.js",
+  "main": "dist/vue-at",
   "engines": {
     "node": ">= 14.x"
   },
@@ -25,21 +24,18 @@
     "vue": "3.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
+    "@vitejs/plugin-legacy": "^2.0.0",
+    "@vitejs/plugin-vue": "^3.0.1",
     "@vue/compat": "^3.1.0",
-    "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "element-plus": "^2.2.12",
     "eslint": "^8.21.0",
     "eslint-plugin-vue": "^9.3.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "sass": "^1.53.0",
-    "sass-loader": "^13.0.2",
-    "vue": "^3.1.0",
-    "vue-loader": "^16.0.0",
-    "webpack": "^5.73.0"
+    "terser": "^5.4.0",
+    "vite": "^3.0.5",
+    "vue": "^3.1.0"
   }
 }
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -79,11 +79,18 @@
 
 <script>
 // import At from 'vue-at'
-// import At from '../dist/vue-at.common'
-// import AtTa from '../dist/vue-at-textarea.common'
 import At from './At.vue'
 import AtTa from './AtTextarea.vue'
 
+// testing dist
+// import '../dist/style.css'
+//  -- mjs
+// import At from '../dist/vue-at.mjs'
+// import AtTa from '../dist/vue-at-textarea.mjs'
+//  -- common js
+// import At from '../dist/vue-at'
+// import AtTa from '../dist/vue-at-textarea'
+
 let members = [
   /* eslint-disable */
   "Roxie Miles","grace.carroll",

diff --git a/vite.config.0.js b/vite.config.0.js
@@ -0,0 +1,27 @@
+// https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/
+// vue2
+// import { createVuePlugin as vue } from 'vite-plugin-vue2'
+// vue3
+import vue from '@vitejs/plugin-vue'
+
+// todo: vite should support css.extract=false
+// pending https://github.com/vitejs/vite/issues/4345
+
+export default {
+  plugins: [vue()],
+  build: {
+    emptyOutDir: false,
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  }
+}
diff --git a/vite.config.1.js b/vite.config.1.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import commonConfig from './vite.config.0'
+
+export default defineConfig({
+  ...commonConfig,
+  build: {
+    ...commonConfig.build,
+    lib: {
+      entry: resolve(__dirname, 'src/At.vue'),
+      name: 'VueAt',
+      fileName: 'vue-at',
+      formats: ['cjs', 'es', 'umd']
+    }
+  }
+})
diff --git a/vite.config.2.js b/vite.config.2.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import commonConfig from './vite.config.0'
+
+export default defineConfig({
+  ...commonConfig,
+  build: {
+    ...commonConfig.build,
+    lib: {
+      entry: resolve(__dirname, 'src/AtTextarea.vue'),
+      name: 'VueAtTextarea',
+      fileName: 'vue-at-textarea',
+      formats: ['cjs', 'es', 'umd']
+    }
+  }
+})
diff --git a/vite.demo.config.js b/vite.demo.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+
+// https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/
+// vue2
+// import { createVuePlugin as vue } from 'vite-plugin-vue2'
+// vue3
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})
diff --git a/vue.config.js b/vue.config.js