From 1212f1db5ae52a4032ca32ee808ce3748e4fd37b Mon Sep 17 00:00:00 2001 From: Fritz Lin Date: Tue, 9 Aug 2022 20:56:31 +0800 Subject: [PATCH] wip: switched to vite. todo: vite should support css.extract=false https://github.com/fritx/vue-at/issues/137 https://github.com/vitejs/vite/issues/4345 https://github.com/vitejs/vite/issues/9086 --- README.md | 4 +++- index.html | 9 +++++---- package.json | 28 +++++++++++----------------- public/vite.svg | 1 + src/App.vue | 12 ------------ vite.config.0.js | 27 +++++++++++++++++++++++++++ vite.config.1.js | 16 ++++++++++++++++ vite.config.2.js | 16 ++++++++++++++++ vite.demo.config.js | 12 ++++++++++++ vue.config.js | 27 --------------------------- 10 files changed, 91 insertions(+), 61 deletions(-) create mode 100644 public/vite.svg create mode 100644 vite.config.0.js create mode 100644 vite.config.1.js create mode 100644 vite.config.2.js create mode 100644 vite.demo.config.js delete mode 100644 vue.config.js diff --git a/README.md b/README.md index 9c1bc59..ba40186 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,8 @@ npm i vue1-at # for Vue1 (branch vue1-new) + diff --git a/package.json b/package.json index 2a9a492..809130f 100644 --- a/package.json +++ b/package.json @@ -5,20 +5,19 @@ "author": "Fritz Lin ", "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", - "demo": "vue-cli-service build", - "build:at": "vue-cli-service build ./src/At.vue --target lib --name vue-at && shx mv dist/vue-at.common.js dist/vue-at.js", - "build:at-ta": "vue-cli-service build ./src/AtTextarea.vue --target lib --name vue-at-textarea && shx mv dist/vue-at-textarea.common.js dist/vue-at-textarea.js", - "build": "shx rm -rf dist && run-p build:at build:at-ta && shx rm 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", + "demo": "vite build --config vite.demo.config.js", + "build": "shx rm -rf 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.js", "files": [ "dist" ], + "main": "dist/vue-at", "engines": { "node": ">= 14.x" }, @@ -29,21 +28,16 @@ "vue": "3.x" }, "devDependencies": { - "@babel/core": "^7.18.9", - "@vue/cli-plugin-eslint": "^5.0.8", - "@vue/cli-service": "^5.0.8", + "@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", "sass": "^1.53.0", - "sass-loader": "^13.0.2", "shx": "^0.3.4", - "vue": "^3.1.0", - "vue-loader": "^16.0.0", - "webpack": "^5.73.0" + "vite": "^3.0.5", + "vue": "^3.1.0" } } diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 508f419..e245572 100644 --- a/src/App.vue +++ b/src/App.vue @@ -81,18 +81,6 @@ import At from './At.vue' import AtTa from './AtTextarea.vue' -// testing dist -// import At from '../dist/vue-at' -// import AtTa from '../dist/vue-at-textarea' - -// testing npm_pack -// import At from '../package/' -// import AtTa from '../package/dist/vue-at-textarea' - -// testing node_modules -// import At from 'vue-at' -// import AtTa from 'vue-at/dist/vue-at-textarea' - let members = [ /* eslint-disable */ "Roxie Miles","grace.carroll", diff --git a/vite.config.0.js b/vite.config.0.js new file mode 100644 index 0000000..f1ba217 --- /dev/null +++ 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 new file mode 100644 index 0000000..96ee190 --- /dev/null +++ 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', 'umd'] + } + } +}) diff --git a/vite.config.2.js b/vite.config.2.js new file mode 100644 index 0000000..5bb3b9b --- /dev/null +++ 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', 'umd'] + } + } +}) diff --git a/vite.demo.config.js b/vite.demo.config.js new file mode 100644 index 0000000..2aad946 --- /dev/null +++ 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 deleted file mode 100644 index 8a1f0c8..0000000 --- a/vue.config.js +++ /dev/null @@ -1,27 +0,0 @@ - -module.exports = { - css: { - extract: false, // inline css into js - loaderOptions: { - sass: {}, - scss: {} - } - }, - chainWebpack: config => { - // config.resolve.alias.set('vue', '@vue/compat') - - config.module - .rule('vue') - .use('vue-loader') - .tap(options => { - return { - ...options, - compilerOptions: { - compatConfig: { - MODE: 2 - } - } - } - }) - } -}