adambullmer / vue-cli-plugin-browser-extension

Browser extension development plugin for vue-cli 3.0
GNU Lesser General Public License v3.0
427 stars 76 forks source link

Add new cli-service command instead of modifying existing. #34

Closed theharshin closed 5 years ago

theharshin commented 5 years ago

I have a web project where I use VueCLI and now want to develop a supporting chrome extension. I want to reuse the Vue components in extension and so I need to add this plugin under the same setup. The current plugin modifies the default entry files and thus my default setup stops building. Do we have a workaround where we add new cli-service command instead of making changes in default settings?

So scripts in package.json can be something like this:

"extension:build": "vue-cli-service extension-build",
"extension:serve": "vue-cli-service extension-build --mode development --watch",

The vue-cli-plugin-electron-builder does something like this without touching existing commands.

adambullmer commented 5 years ago

Definitely not out of the question, but I think your issue stems from your project setup. If you've got a set of shared components, you might want to go with a monorepo setup (Lerna or yarn workspaces do this well), where you have a package with all your shared components that is a dependency of your extension and web projects.

.
|- packages/
|   |- extension/
|       |- run `vue create .` and `vue add browser-extension`
|   |- project/
|       |- your existing web project
|   |- shared/
|       |- src/
|           |- components/
|               |- shared components
|- package.json
theharshin commented 5 years ago

Hmm, what I was thinking of doing was, to manage all the builds under same Vue CLI setup. So my current setup looks like this.

image

What I can understand from your structure is that I'll need to install separate Vue CLI for extension and project right?

adambullmer commented 5 years ago

You're correct: I would recommend separate vue-cli projects per build style. On top of that, I would recommend a common components project that would be the source of anything you would want to be reusable across projects.

Closing due to the recommendation that a monorepo setup is the preferred project setup at this time for component reuse across different build types: web app, electron app, browser extension, and mobile app. I'll be happy to revisit this in the future as technology continues to evolve, but at this time, supporting more than just browser extensions is outside the scope of this project.