feat: add VITE_DIST_FILES and default rollupOptions

README.md

@@ -88,7 +88,7 @@ private _getWebviewContent(webview: Webview, extensionUri: Uri) {
 
     if (process.env.VITE_DEV_SERVER_URL) {
       // @ts-ignore
-      return __getWebviewHtml({ serverUrl: process.env.VITE_DEV_SERVER_URL });
+      return __getWebviewHtml__({ serverUrl: process.env.VITE_DEV_SERVER_URL });
     }
 
     // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
@@ -223,9 +223,17 @@ Based on [Options](https://paka.dev/npm/tsup) of [tsup](https://tsup.egoist.dev/
 
 `vscode extension` use.
 
-| Variable              | Description                |
-| --------------------- | -------------------------- |
-| `VITE_DEV_SERVER_URL` | The url of the dev server. |
+- `development` mode
+
+| Variable              | Description                     |
+| --------------------- | ------------------------------- |
+| `VITE_DEV_SERVER_URL` | The url of the vite dev server. |
+
+- `production` mode
+
+| Variable | Description |
+| --- | --- |
+| `VITE_DIST_FILES` | All js files in the dist directory, excluding index.js. It's to be a json string. |
 
 ## Debug
 
@@ -299,5 +307,6 @@ pnpm build
 
 Open the [examples](./examples) directory, there are `vue` and `react` examples.
 
-- [react](./examples/react)
-- [vue](./examples/vue)
+- [react](./examples/react): simple react example.
+- [vue](./examples/vue): simple vue example.
+- [vue-import](./examples/vue-import): dynamic import() example.

README.zh_CN.md

@@ -80,15 +80,15 @@ const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewCol
 ```ts
 private _getWebviewContent(webview: Webview, extensionUri: Uri) {
     // The CSS file from the Vue build output
-    const stylesUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.css']);
+    const stylesUri = getUri(webview, extensionUri, ['dist/webview/assets/index.css']);
     // The JS file from the Vue build output
-    const scriptUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.js']);
+    const scriptUri = getUri(webview, extensionUri, ['dist/webview/assets/index.js']);
 
     const nonce = uuid();
 
     if (process.env.VITE_DEV_SERVER_URL) {
       // @ts-ignore
-      return __getWebviewHtml({ serverUrl: process.env.VITE_DEV_SERVER_URL });
+      return __getWebviewHtml__({ serverUrl: process.env.VITE_DEV_SERVER_URL });
     }
 
     // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
@@ -140,15 +140,6 @@ export default defineConfig({
     }),
     vscode(),
   ],
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: `assets/[name].js`,
-        chunkFileNames: `assets/[name].js`,
-        assetFileNames: `assets/[name].[ext]`,
-      },
-    },
-  },
 });
 ```
 
@@ -164,15 +155,6 @@ import react from '@vitejs/plugin-react-swc';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), vscode()],
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: `assets/[name].js`,
-        chunkFileNames: `assets/[name].js`,
-        assetFileNames: `assets/[name].[ext]`,
-      },
-    },
-  },
 });
 ```
 
@@ -222,9 +204,17 @@ export default defineConfig({
 
 `vscode extension` 使用
 
+- `development` 模式
+
 | 变量                  | 描述                  |
 | --------------------- | --------------------- |
-| `VITE_DEV_SERVER_URL` | Vite 开发服务器的 URL |
+| `VITE_DEV_SERVER_URL` | vite开发服务器的url。 |
+
+- `production` 模式
+
+| 变量              | 描述                                                            |
+| ----------------- | --------------------------------------------------------------- |
+| `VITE_DIST_FILES` | dist目录下的所有js文件，不包括index.js。 它是一个 json 字符串。 |
 
 ## Debug
 
@@ -298,5 +288,6 @@ pnpm build
 
 打开 [examples](./examples) 目录，有 `vue` 和 `react` 示例。
 
-- [react](./examples/react)
-- [vue](./examples/vue)
+- [react](./examples/react)：简单的 react 示例。
+- [vue](./examples/vue)：简单的 vue 示例。
+- [vue-import](./examples/vue-import)：动态 import() 示例。

env.d.ts

@@ -8,10 +8,14 @@ declare namespace NodeJS {
     /**
      * Node.js environment
      */
-    NODE_ENV: UnionType<'development' | 'test' | 'production'>;
+    NODE_ENV: UnionType<'development' | 'production'>;
     /**
-     * The url of the dev server.
+     * development mode. The url of the vite dev server.
      */
     VITE_DEV_SERVER_URL?: string;
+    /**
+     * production mode. All js files in the dist directory, excluding index.js. It's to be a json string.
+     */
+    VITE_DIST_FILES?: string;
   }
 }

examples/react/extension/panels/HelloWorldPanel.ts

@@ -1,5 +1,5 @@
 import { Disposable, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
-// import __getWebviewHtml from '@tomjs/vscode-extension-webview';
+// import __getWebviewHtml__ from '@tomjs/vscode-extension-webview';
 
 function uuid() {
   let text = '';
@@ -123,7 +123,7 @@ export class HelloWorldPanel {
 
     if (process.env.VITE_DEV_SERVER_URL) {
       // @ts-ignore
-      return __getWebviewHtml({ serverUrl: process.env.VITE_DEV_SERVER_URL });
+      return __getWebviewHtml__({ serverUrl: process.env.VITE_DEV_SERVER_URL });
     }
 
     // Tip: Install the es6-string-html VS Code extension to enable code highlighting below

examples/react/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="@tomjs/vite-plugin-vue/env" />

examples/react/vite.config.ts

@@ -5,13 +5,4 @@ import react from '@vitejs/plugin-react-swc';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), vscode()],
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: `assets/[name].js`,
-        chunkFileNames: `assets/[name].js`,
-        assetFileNames: `assets/[name].[ext]`,
-      },
-    },
-  },
 });

examples/vue-import/.eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    node: true,
+    es6: true,
+  },
+  extends: [require.resolve('@tomjs/eslint/vue/typescript')],
+};

examples/vue-import/.vscode/launch.json

@@ -0,0 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/dist/extension/*.js"
+      ],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
+}

examples/vue-import/.vscode/tasks.json

@@ -0,0 +1,36 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "dev",
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*extension build start*$",
+          "endsPattern": "^.*extension (build|rebuild) success.*$"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

examples/vue-import/README.md

@@ -0,0 +1,3 @@
+# vue
+
+vite + vue

examples/vue-import/extension/index.ts

@@ -0,0 +1,14 @@
+import { commands, ExtensionContext } from 'vscode';
+import { HelloWorldPanel } from './panels/HelloWorldPanel';
+
+export function activate(context: ExtensionContext) {
+  // Create the show hello world command
+  const showHelloWorldCommand = commands.registerCommand('hello-world.showHelloWorld', async () => {
+    HelloWorldPanel.render(context.extensionUri);
+  });
+
+  // Add command to the extension context
+  context.subscriptions.push(showHelloWorldCommand);
+}
+
+export function deactivate() {}