chore: 升级 vite@2.0

package.json

@@ -9,9 +9,9 @@
     "dev:all": "concurrently -n=vue,ele -c=green,blue \"npm run dev:vue\" \"npm run dev:ele\"",
     "dev:vue": "vite",
     "dev:ele": "node -r ts-node/register script/build --env=development --watch",
-    "build:vue": "vite build",
+    "build:vue": "vuedx-typecheck . && vite build",
     "build:ele": "node -r ts-node/register script/build --env=production",
-    "build": "rm -rf dist && npm run build:vue && npm run build:ele && electron-builder"
+    "build": "rimraf dist && npm run build:vue && npm run build:ele && electron-builder"
   },
   "build": {
     "appId": "308487730@qq.com",
@@ -44,7 +44,7 @@
     }
   },
   "dependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.0.5"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.1",
@@ -53,21 +53,23 @@
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@types/minimist": "^1.2.1",
     "@types/wait-on": "^5.2.0",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vitejs/plugin-vue": "^1.1.4",
+    "@vue/compiler-sfc": "^3.0.5",
+    "@vuedx/typecheck": "^0.6.0",
+    "@vuedx/typescript-plugin-vue": "^0.6.0",
     "chalk": "^4.1.0",
     "concurrently": "^5.3.0",
-    "electron": "9.1.0",
+    "electron": "11.2.3",
     "electron-builder": "^22.8.0",
-    "electron-is-dev": "^1.2.0",
+    "electron-store": "^7.0.2",
-    "electron-store": "^6.0.0",
     "minimist": "^1.2.5",
     "ora": "^5.0.0",
+    "rimraf": "^3.0.2",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-esbuild": "^2.4.2",
     "ts-node": "^9.1.1",
-    "typescript": "^4.0.3",
+    "typescript": "^4.1.3",
-    "vite": "^1.0.0-rc.4",
+    "vite": "^2.0.0"
-    "wait-on": "^5.2.0"
   },
   "keywords": [
     "vite",

script/build.ts

@@ -7,9 +7,9 @@ import { watch, rollup, OutputOptions } from 'rollup'
 import minimist from 'minimist'
 import chalk from 'chalk'
 import ora from 'ora'
-import waitOn from 'wait-on'
 import electron from 'electron'
 import dotenv from 'dotenv'
+import { waitOn } from './utils'
 import options from './rollup.config'
 import { main } from '../package.json'
 
@@ -21,16 +21,7 @@ const TAG = '[script/build.ts]'
 const spinner = ora(`${TAG} Electron build...`)
 
 if (argv.watch) {
-  waitOn({
+  waitOn({ port: process.env.PORT as string }).then(msg => {
-    resources: [`http://localhost:${process.env.PORT}`],
-    log: false,
-  }, err => {
-    if (err) {
-      console.log(err)
-      process.exit(1)
-    }
-
-    // once here, all resources are available
     const watcher = watch(opt)
     let child: ChildProcess
     watcher.on('change', filename => {

script/utils.ts

@@ -0,0 +1,18 @@
+import { get } from 'http'
+
+/** 轮询监听 vite 启动 */
+export function waitOn(arg0: { port: string | number; interval?: number; }) {
+  return new Promise(resolve => {
+    const { port, interval = 149 } = arg0
+    let counter = 0
+    const timer: NodeJS.Timer = setInterval(() => {
+      get(`http://localhost:${port}`, res => {
+        clearInterval(timer)
+        console.log('[waitOn]', res.statusCode, res.statusMessage)
+        resolve(res.statusCode)
+      }).on('error', err => {
+        console.log('[waitOn]', `counter:${counter++}`)
+      })
+    }, interval)
+  })
+}

src/main/index.ts

@@ -3,7 +3,6 @@
  */
 import { join } from 'path'
 import { app, BrowserWindow } from 'electron'
-import is_dev from 'electron-is-dev'
 import dotenv from 'dotenv'
 
 dotenv.config({ path: join(__dirname, '../../.env') })
@@ -21,9 +20,9 @@ function createWin() {
     },
   })
 
-  const URL = is_dev
+  const URL = app.isPackaged
-    ? `http://localhost:${process.env.PORT}` // vite 启动的服务器地址
+    ? `file://${join(__dirname, '../render/index.html')}` // vite 构建后的静态文件地址
-    : `file://${join(__dirname, '../render/index.html')}` // vite 构建后的静态文件地址
+    : `http://localhost:${process.env.PORT}` // vite 启动的服务器地址
 
   win?.loadURL(URL)
 }

src/render/App.vue

@@ -3,7 +3,7 @@
     <img style="height:200px;" src="./assets/electron.png" alt="Electron logo">
     <img alt="Vue logo" src="./assets/logo.png" />
   </div>
-  <HelloWorld msg="Hello Electron 9.0 + Vue 3.0 + Vite" />
+  <HelloWorld msg="Electron@11、Vue@3、Vite@2" />
 </template>
 
 <script>

src/render/components/HelloWorld.vue

@@ -1,19 +1,89 @@
 <template>
   <h1>{{ msg }}</h1>
+
+  <label>
+    <input type="checkbox" v-model="useScriptSetup" /> Use
+    <code>&lt;script setup&gt;</code>
+  </label>
+  <label>
+    <input type="checkbox" v-model="useTsPlugin" /> Provide types for
+    <code>*.vue</code> imports
+  </label>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <template v-if="!useScriptSetup">
+      <a
+        href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
+        target="_blank"
+      >Vetur</a>
+      +
+      <a
+        href="https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features"
+        target="_blank"
+      >Vue DX</a>
+    </template>
+    <template v-else>
+      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    </template>
+  </p>
+  <p v-if="useTsPlugin">
+    tsconfig setup:
+    <br />1. Install and add
+    <code>@vuedx/typescript-plugin-vue</code> to tsconfig plugins
+    <br />2. Delete <code>src/shims-vue.d.ts</code>
+    <br />3. Open
+    <code>src/main.ts</code> in VSCode
+    <br />4. Open VSCode command input
+    <br />5. Search and run "Select TypeScript version" -> "Use workspace version"
+  </p>
   <button @click="count++">count is: {{ count }}</button>
-  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a> |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { ref, defineComponent } from 'vue'
+export default defineComponent({
   name: 'HelloWorld',
   props: {
-    msg: String
+    msg: {
+      type: String,
+      required: true
+    }
   },
-  data() {
+  setup: () => {
-    return {
+    const count = ref(0)
-      count: 0
+    const useScriptSetup = ref(false);
-    }
+    const useTsPlugin = ref(false);
-  }
+    return { count, useScriptSetup, useTsPlugin }
   }
+})
 </script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

src/render/main.ts

@@ -2,12 +2,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 // vite 会编译 import 的形式；所以 electron 及 node.js 内置模块用 require 形式
 const { ipcRenderer } = require('electron')
-import { store, isdev } from '/utils/index'
+// import { store, isdev } from '/utils/index'
 
 import './index.css'
 
 console.log('ipcRenderer:', ipcRenderer)
-console.log('Store', store)
+// console.log('Store', store)
-console.log('electron is dev', isdev)
+// console.log('electron is dev', isdev)
 
 createApp(App as any).mount('#app').$nextTick(window.ClosePreloadLoading)

src/render/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/render/shims.d.ts

@@ -1,9 +0,0 @@
-declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
-}
-
-interface Window {
-  /** 关闭预加载动画 */
- ClosePreloadLoading: () => void
-}

src/render/source.d.ts

@@ -1,4 +0,0 @@
-declare const React: string
-declare module '*.json'
-declare module '*.png'
-declare module '*.jpg'

src/render/typings.d.ts

@@ -0,0 +1,11 @@
+
+// declare const React: string
+declare module '*.json'
+declare module '*.png'
+declare module '*.jpg'
+
+
+interface Window {
+  /** 关闭预加载动画 */
+ ClosePreloadLoading: () => void
+}

tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "ESNext",
     "module": "UMD",
     "moduleResolution": "node",
     "importHelpers": true,
-    "jsx": "react",
+    "jsx": "preserve",
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "sourceMap": true,

vite.config.ts

@@ -1,33 +1,39 @@
-/**
+import { defineConfig } from 'vite'
- * 参考链接: https://github.com/vitejs/vite/blob/master/src/node/config.ts
+import vue from '@vitejs/plugin-vue'
- */
 import { join, sep } from 'path'
-import { UserConfig } from 'vite'
 import dotenv from 'dotenv'
 
 dotenv.config({ path: join(__dirname, '.env') })
 const root = join(__dirname, 'src/render')
 
-const config: UserConfig = {
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
   root,
+  // base: './',
+  server: {
     port: +process.env.PORT,
-  base: './',
+  },
-  outDir: join(__dirname, 'dist/render'),
+  resolve: {
     alias: {
-    // 别名必须以 / 开头、结尾
+      '@root': __dirname,
-    // '/@/': root, -- vite 内部在用，这里不能用了
+      '@assets': join(__dirname, 'src/render/assets'),
-    // '/root/': __dirname, -- vite 内部在用，这里不能用了
+      '@components': join(__dirname, 'src/render/components'),
-    '/assets/': join(__dirname, 'src/render/assets'),
+      '@lib': join(__dirname, 'src/render/lib'),
-    '/components/': join(__dirname, 'src/render/components'),
+      '@utils': join(__dirname, 'src/render/utils'),
-    '/lib/': join(__dirname, 'src/render/lib'),
+      '@views': join(__dirname, 'src/render/views'),
-    '/utils/': join(__dirname, 'src/render/utils'),
+    },
-    '/views/': join(__dirname, 'src/render/views'),
   },
   optimizeDeps: {
     // 这里不加也没事，用 require 的形式就能避开 import 被编译成 /@modules/fs?import
     // allowNodeBuiltins: ['electron-is-dev', 'electron-store', 'electron']
   },
-  rollupInputOptions: {
+  build: {
+    outDir: join(__dirname, 'dist/render'),
+    rollupOptions: {
+      output: {
+        // format: 'commonjs',
+      },
       external: [
         'crypto',
         'assert',
@@ -60,9 +66,6 @@ const config: UserConfig = {
         }
       ],
     },
-  rollupOutputOptions: {
-    format: 'commonjs',
   },
-}
+})
 
-export default config