终于写完了

demo/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --open",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
@@ -14,7 +14,8 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",
     "typescript": "^5.0.2",
-    "vite": "^4.3.2",
+    "vite": "^4.3.8",
+    "vite-plugin-global-const": "file:../",
     "vue-tsc": "^1.4.2"
   }
 }

demo/src/App.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import {ref} from 'vue'
 import HelloWorld from './components/HelloWorld.vue'
+
+console.log(import.meta.env)
+const env = ref(import.meta.env)
 </script>
 
 <template>
@@ -11,6 +15,7 @@ import HelloWorld from './components/HelloWorld.vue'
       <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
+  {{ env }}
   <HelloWorld msg="Vite + Vue" />
 </template>
 

demo/vite.config.ts

@@ -1,7 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { globalConst } from 'vite-plugin-global-const'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    globalConst({
+      Text: 'Hello World!',
+      MAIN: true
+    }),
+
+    vue(),
+  ],
 })

esm/index.js

@@ -0,0 +1,15 @@
+export function globalConst(config) {
+    return {
+        name: 'vite-plugin-global-const',
+        config() {
+            console.log(config);
+            const define = {};
+            for (const key in config) {
+                define[`import.meta.env.${key}`] = JSON.stringify(config[key]);
+            }
+            return {
+                define,
+            };
+        },
+    };
+}

package.json

@@ -5,7 +5,7 @@
   "description": "Define constants for your project to facilitate reuse of your code across multiple products",
   "main": "/esm/index.js",
   "repository": "https://github.com/censujiang/vite-plugin-global-const.git",
-  "homepage":"https://github.com/censujiang/vite-plugin-global-const",
+  "homepage": "https://github.com/censujiang/vite-plugin-global-const",
   "bugs": {
     "url": "https://github.com/censujiang/vite-plugin-global-const/issues"
   },
@@ -28,10 +28,13 @@
   "types": "types",
   "scripts": {
     "build": "tsc",
+    "demo:reload": "node ./scripts/demo-reload.js",
     "release": "node ./scripts/release.js"
   },
   "devDependencies": {
+    "@types/node": "^20.2.3",
     "shelljs": "^0.8.5",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vite": "^4.3.8"
   }
 }

scripts/demo-reload.js

@@ -0,0 +1,16 @@
+import shell from 'shelljs';
+
+//执行一遍npm run build
+shell.exec('yarn run build');
+
+//删除demo/node_modules的所有文件
+shell.rm('-rf', 'demo/node_modules');
+
+//进入demo目录
+shell.cd('demo');
+
+//安装demo/node_modules
+shell.exec('yarn');
+
+//启动demo
+shell.exec('yarn run dev');

src/index.ts

@@ -1,17 +1,21 @@
-//使用这个函数挂载到vite上，可以在任何地方使用
-export function globalConst(){
+import { Plugin } from 'vite';
+
+interface Config {
+  [key: string]: any;
+}
+
+export function globalConst(config: Config): Plugin {
   return {
-    name:'vite-plugin-global-const',
-    //挂载后接收用户传入的参数
-    config(config){
-      return {
-        define:{
-          //这里的key就是用户传入的key，value就是用户传入的value
-          'process.env':{
-            ...config
-          }
-        }
+    name: 'vite-plugin-global-const',
+    config() {
+      console.log(config);
+      const define = {};
+      for (const key in config) {
+        define[`import.meta.env.${key}`] = JSON.stringify(config[key]);
       }
-    }
-  }
-}
+      return {
+        define,
+      };
+    },
+  };
+}

tsconfig.json

@@ -3,6 +3,9 @@
 		"target": "ESNext",
 		"module": "ESNext",
 		"moduleResolution": "node",
+    "paths": {
+      "vite":["node_modules/vite/dist/index.esm.js"]
+    },
 		"baseUrl": "./",
 		"noImplicitAny": false,
 		"rootDir": "./src",

types/index.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from 'vite';
+interface Config {
+    [key: string]: any;
+}
+export declare function globalConst(config: Config): Plugin;
+export {};