不能导入模块

[frg2089]

vite打包如果有输出多个文件的话 在vscode里是用不了的

[tomgao365]

@frg2089 你好，你的 vite.config.ts 有没有添加这个，试试？ https://github.com/tomjs/vite-plugin-vscode/blob/d146e4c98aaa17a89bd690cff09e935d7e71e34d/examples/vue/vite.config.ts#L17-L25

[frg2089]

@frg2089 你好，你的 vite.config.ts 有没有添加这个，试试？

https://github.com/tomjs/vite-plugin-vscode/blob/d146e4c98aaa17a89bd690cff09e935d7e71e34d/examples/vue/vite.config.ts#L17-L25

这是我的vite配置

vite.config.mts

import vscode from '@tomjs/vite-plugin-vscode'
import vue from '@vitejs/plugin-vue'
import * as path from 'node:path'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag: string) => tag.startsWith('vscode-'),
        },
      },
    }),
    vscode({
      extension: {
        loader: {
          '.html': 'text',
        },
      },
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        ShpViewer: path.resolve(__dirname, 'view', 'ShpViewer.html'),
      },
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`,
      },
    },
  },
  resolve: {
    alias: {
      'code:view': path.resolve(__dirname, 'src'),
    },
  },
})

多出来的那些似乎是 pixi.js@8.0.0-rc 的内容

[tomgao365]

@frg2089 试了试 pixi.js 的 v7 和 v8 版本，v8的确会有这个问题，代码里使用了 import() 造成的。我暂时没解决方案，看看有没有什么配置或插件可以把这个合并到同一个文件。

[frg2089]

元旦快乐 辛苦了

[tomgao365]

@frg2089 元旦快乐。昨晚看了看暂时没找到好的解决方案，rollup没去深入研究过，暂时无法帮助你了。

[tomgao365]

@frg2089 试试这个处理方法。只能说临时解决了import加载的问题，不怎么好。如果有好的方案，欢迎分享。 https://github.com/tomjs/vite-plugin-vscode/blob/5d4402df62a44b5e6fb59682a62cac2e86135c17/examples/vue-import/extension/panels/HelloWorldPanel.ts#L148-L182

[frg2089]

谢谢 不过我已经自己写了一套构建系统 不用vite了 之后有机会再写vscode扩展的话我会去试试看的

[tomgao365]

@frg2089 好的。😊

[frg2089]

@frg2089 试试这个处理方法。只能说临时解决了import加载的问题，不怎么好。如果有好的方案，欢迎分享。

https://github.com/tomjs/vite-plugin-vscode/blob/5d4402df62a44b5e6fb59682a62cac2e86135c17/examples/vue-import/extension/panels/HelloWorldPanel.ts#L148-L182

看起来这种导入的方案不适用于有多个页面的情况 Vite - 多页面应用模式

[frg2089]

我用了这样的配置使 pixi.js 只生成一个文件

// ...

  build: {
    modulePreload: {
      // https://vitejs.dev/config/build-options.html#build-modulepreload
      // 这个对 VSCode Webview 有帮助吗？
      polyfill: false,
    },
    rollupOptions: {
      output: {
        // https://rollupjs.org/configuration-options/#output-manualchunks
        manualChunks: (id, meta) => {
          if (id.includes('pixi.js')) {
            return 'pixi'
          }
        },
      },
    },
  },

// ...