Coder Social home page Coder Social logo

不能导入模块 about vite-plugin-vscode HOT 10 CLOSED

frg2089 avatar frg2089 commented on May 28, 2024
不能导入模块

from vite-plugin-vscode.

Comments (10)

frg2089 avatar frg2089 commented on May 28, 2024 1

我用了这样的配置使 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'
          }
        },
      },
    },
  },

// ...

from vite-plugin-vscode.

tomgao365 avatar tomgao365 commented on May 28, 2024

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

vite-plugin-vscode/examples/vue/vite.config.ts

Lines 17 to 25 in d146e4c

build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`,
},
},
},

from vite-plugin-vscode.

frg2089 avatar frg2089 commented on May 28, 2024

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

vite-plugin-vscode/examples/vue/vite.config.ts

Lines 17 to 25 in d146e4c

build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`,
},
},
},

这是我的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'),
    },
  },
})

多出来的那些似乎是 [email protected] 的内容

from vite-plugin-vscode.

tomgao365 avatar tomgao365 commented on May 28, 2024

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

from vite-plugin-vscode.

frg2089 avatar frg2089 commented on May 28, 2024

元旦快乐 辛苦了

from vite-plugin-vscode.

tomgao365 avatar tomgao365 commented on May 28, 2024

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

from vite-plugin-vscode.

tomgao365 avatar tomgao365 commented on May 28, 2024

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

vite-plugin-vscode/examples/vue-import/extension/panels/HelloWorldPanel.ts

Lines 148 to 182 in 5d4402d

const jsDistFiles = process.env.VITE_DIST_FILES;
let jsFiles = [];
try {
if (jsDistFiles) {
jsFiles = JSON.parse(jsDistFiles || '');
}
} catch {}
const injectScripts = jsFiles
.map(
s =>
`<script type="module" src="${getUri(webview, extensionUri, [
s,
])}" nonce="${nonce}"></script>`,
)
.join('\n');
// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
return /*html*/ `
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}' 'unsafe-eval';">
<base href="${baseUri}" />
${injectScripts}
<script type="module" crossorigin nonce="${nonce}" src="${scriptUri}"></script>
<link rel="stylesheet" crossorigin href="${stylesUri}">
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

from vite-plugin-vscode.

frg2089 avatar frg2089 commented on May 28, 2024

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

from vite-plugin-vscode.

tomgao365 avatar tomgao365 commented on May 28, 2024

@frg2089 好的。😊

from vite-plugin-vscode.

frg2089 avatar frg2089 commented on May 28, 2024

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

vite-plugin-vscode/examples/vue-import/extension/panels/HelloWorldPanel.ts

Lines 148 to 182 in 5d4402d

const jsDistFiles = process.env.VITE_DIST_FILES;
let jsFiles = [];
try {
if (jsDistFiles) {
jsFiles = JSON.parse(jsDistFiles || '');
}
} catch {}
const injectScripts = jsFiles
.map(
s =>
`<script type="module" src="${getUri(webview, extensionUri, [
s,
])}" nonce="${nonce}"></script>`,
)
.join('\n');
// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
return /*html*/ `
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}' 'unsafe-eval';">
<base href="${baseUri}" />
${injectScripts}
<script type="module" crossorigin nonce="${nonce}" src="${scriptUri}"></script>
<link rel="stylesheet" crossorigin href="${stylesUri}">
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

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

from vite-plugin-vscode.

Related Issues (3)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.