папка vue cli "live build" для расширения Chrome

Question

Я делаю расширение и использую npm run build(с vue cli), чтобы сделать мою страницу параметров. Мне нужно взаимодействовать с chrome.local.storage. Итак, на данный момент каждое изменение мне нужно, чтобы создать новую сборку, а затем протестировать ее в расширении.

Было бы неплохо иметь какую-нибудь "живую папку сборки"

Я могу использовать esbuild или esbuild-vue, но с Vuetify в моем проекте я не могу заставить его работать

Сейчас я использую esbuild-vue:

      const vuePlugin = require('esbuild-vue');

require('esbuild').build({
    entryPoints: ['main.js'],
    bundle: true,
    outfile: 'out.js',
    plugins: [vuePlugin()],
    watch: {
        onRebuild(error, result) {
            if (error) console.error('watch build failed:', error)
            else console.log('watch build succeeded:', result)
        },
    },
    define: {
        "process.env.NODE_ENV": JSON.stringify("development"),
    },
});

Answer 1

Хорошо, у меня работает Vuetify 3 (Alpha) + Vite.

Пример

Для примера проекта вы можете клонировать: https://github.com/zoutepopcorn/extension-live-build

Настраивать

Сначала настройте новый проект vue create my-appс vuetify vue add vuetify

Тогда выбирай:

      ? Choose a preset: (Use arrow keys)
  Default (recommended)
> Preview (Vuetify 3 + Vite) 
  Prototype (rapid development)
  V3 (alpha)
  Configure (advanced)

Теперь отредактируйте vite.config.jsи добавьте сборку и базу:

      export default defineConfig({
  ...
  build: {
    outDir: "extension/options"
  },
  base: "options"
})

Теперь у вас есть внешний интерфейс и веб-расширение для установки папок, например:

      extension  (extension )
  |-- manifest.json
  |--- options (build output front-end)
src (front-end options)
package.json
vite.config.js
...

Теперь вы можете использовать package.json следующим образом:

      { 
  ...
  "scripts": {
        "watch": "vite build --watch",
        "chromium": "web-ext run -t chromium --chromium-binary /usr/bin/google-chrome-stable --arg=\"--auto-open-devtools-for-tabs\" --start-url \"about:blank\"",
        "all": "npm run chromium & npm run watch"
  }
}