[Bug Report] build module copy the `public` folder incorrectly

Rhilip commented 2 years ago

Chrome extension may have some special file ( or folder ) in extension root, like _locales folder for i18n, or static assets folder. However, After add this vite plugin, those files in public folder will not copy to dist folder when execute vite build --watch. But when execute command vite build without --watch param, those files will copy fined.

Steps to reproduce

Create a normal vite project

yarn create vite
cd bug-report
mkdir public
echo 'test file' > public/test.txt
yarn
yarn build --watch

In this step, we can see the file test.txt corrent copy to the public folder, then exit and rm the dist folder.

Add this vite plugin,

yarn add -D vite-plugin-web-extension

and sort project like the demo/vanilla, the whole filetree are like this

src
│  manifest.json
│
├─assets
│  └─icon
│          128.png
│
├─background
│      index.ts
│
├─options
│      index.html
│      main.ts
│
├─popup
│      index.html
│      main.ts
│
└─public
    └─_locales
        ├─en
        │      messages.json
        │
        └─zh_CN
                messages.json

in manifest.json, I change the key name like:

{
  "name": "__MSG_extName__"
}

and the minimal reproduction can see this repo: https://github.com/Rhilip/bugreport-vite-plugin-web-extension-watchbuild

The run the build command,

For vite build --watch , the dist folder is like

dist
  │  manifest.json
  │  modulepreload-polyfill.js
  │
  ├─assets
  │  └─icon
  │          128.png
  │          16.png
  │          48.png
  │
  ├─background
  │  │  index.js
  │  │
  │  └─_locales   <-  It appeared in background folder
  │      ├─en
  │      │      messages.json
  │      │
  │      └─zh_CN
  │              messages.json
  │
  ├─options
  │      index.html
  │      index.js
  │
  └─popup
          index.html
          index.js

For vite build, the dist folder is like

dist
│  manifest.json
│  modulepreload-polyfill.js
│
├─ ... other same folder
│
└─_locales
    ├─en
    │      messages.json
    │
    └─zh_CN
        messages.json

I also test two structure, however still same as step 3

move public folder into project root

      root
      ├─node_modules
      ├─public
      │  └─_locales
      │      ├─en
      │      └─zh_CN
      └─src
          ├─assets
          │  └─icon
          ├─background
          ├─options
          └─popup

separate old public folder, leave _locales folder inside src folder, and use same assets folder.

      root
      ├─node_modules
      └─src
          ├─_locales
           │ ├─en
           │ └─zh_CN
          ├─assets
          │  └─icon
          ├─background
          ├─options
          └─popup

What is actually happening?

When run command vite build , the files in public folder will be copy to dist/background folder and dist folder, When run command vite build --watch, those files will only be copy to dist/background folder.

What is expected?

When run command vite build or vite build -watch, the public folder will copy as default vite behavior: copy to dist folder.

aklinker1 commented 2 years ago

Sorry, just saw this!

TBH, I completely forgot about the public folder, thanks for reporting this! I'm surprised it doesn't just work out of the box, I don't think the extension does anything that would effect it. I'll check this out this weekend, and hopefully get out a fix.

If you need something right now, you can use rollup-plugin-copy to copy files to exactly where they need to go in your output. I use it and it works for both regular and watch build modes.

aklinker1 commented 2 years ago

@Rhilip I've released v1.1.1 with the fix, could you try it out?

Rhilip commented 2 years ago

Sorry for the late reply, it's working fine now

aklinker1 / vite-plugin-web-extension