Electron-vue: Migrate to Single package.json structure

[deiucanta]

There are two package.json's right now and I read the docs on why it is like that. But I just noticed that the root one uses only dev dependencies and the other one uses "normal" dependencies. If you were to merge them into a single one there would be an easy way to tell which dependency is for what.

Am I missing something?

[SimulatedGREG]

@deiucanta

Yes you could separate dependencies using devDependencies but then electron-packager wouldn't know the difference and also include all those devDependencies into your production builds where they will never be used. Things like webpack and babel have an enormous amount of dependencies that'll bloat your file size quickly. In terms of electron-builder, this is actually possible as only production dependencies are included.

[deiucanta]

@SimulatedGREG thanks

Are you aware if electron-packager is planning to do something about it? The overhead is not that big when working with two package.json files but if we can improve the developer experience... why not?

[citycide]

@deiucanta you'd want to check their issues / projects for that. Like @SimulatedGREG said though, electron-builder ( which this boilerplate provides ) supports the single-manifest setup you're asking for.

[SimulatedGREG]

Well it turns out electron-packager did make an update to --prune devDependencies. This is something that was not available at the initial creation of this boilerplate. Its worth considering, but IMO I feel a separate app folder is a much easier structure to use. Typically when you put all source files and dev configurations in one space its gets cluttered quickly. This also prevents the potential error of accidentally including devDependencies in production builds.

[develar]

electron-builder doesn't require you to use separate directories. Only production deps are packed and only production native deps are rebuild. And files/extraFiles/extraResources allows you to easily configure files to pack.

[SimulatedGREG]

I'm fully aware now that both packagers handle this properly, but I'm still not convinced putting everything in one document space really keeps things organized. This goes probably into a bigger discussion about whether or not its worth putting all dev configuration files into its own folder (maybe .electron-vue?).

[citycide]

Here's the other side of the coin though - in this ecosystem there's already a lot of muscle memory involved in installing dependencies. In a node app the root project folder is the only place we install things. We've already got a clear separation within package.json between dependencies and devDependencies.

Separating them further into two files kind of flies in the face of the ecosystem, and I think the electron packaging tools acknowledged this to some extent by supporting the single file structure.

TL:DR; there's a reason both major packaging tools now support single file structure and a reason there's already been issues raised because people installed a dependency in the wrong folder.

[SimulatedGREG]

Just as a quick experiment, putting all configurations in a folder .electron-vue does clean up nicely. What do you guys think?

Expanded

[SimulatedGREG]

Going to spend some time today to implement this. I'll have an update when you guys can give it a try on another branch.

[deiucanta]

looks good :) let me know when you have something up

[SimulatedGREG]

Currently on vacation, but got some free time. You can now try the first draft of this new structure with...

vue init simulatedgreg/electron-vue#feat/simpler-structure my-project

Currently have not brought support for all vue-cli configurations expect for the defaults. Most other configurations should work fine, but the major one that still needs work is electron-builder. Let me know your thoughts!

[rafaelpimpa]

I'm using the simpler-structure on a new project and It's actually great, didn't have any problems until now.

[Derek-X-Wang]

@SimulatedGREG
I created a new project by
vue init simulatedgreg/electron-vue#feat/simpler-structure my-project

However, npm run lint:fix triggers this error:

And my editor(Atom)'s eslint says “Parsing error: The keyword ‘import’ is reserved.”

It seems that .eslintrc.js cannot be found(by Atom?) within .electron-vue.

In my case, moving .eslintrc.js to the root directory solves eslint problem.
package.json
line 11: "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --ignore-path .electron-vue/.eslintignore src test",
line 12: "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix --ignore-path .electron-vue/.eslintignore src test",

.electron-vue/webpack.renderer.config.js
line 128: configFile: path.resolve(__dirname, '../.eslintrc.js'),

Is this a bug or I miss some configuration?

[SimulatedGREG]

I was hoping to move .config files into the .electron-vue folder but that doesn't seems like it will be feasible for users that have text editors expecting them to be in the root directory.

[Derek-X-Wang]

Well, it seems only .eslintrc has to be in the root directory in my case. I leave all other .config files in .electron-vue and it works fine.
Overall, I still think it's a great structure. Like it a lot :smiley:

[alexey2baranov]

I like new structure very much too. Waiting stable release

[re-fort]

I like new structure too, but I think it would be better that webpack.main.config and webpack.render.config are in root directory.
How about putting this project specific files(e.g. config.js, release.js, and so on) in the .electron-vue folder?

[SimulatedGREG]

Possible, but I would like to keep everything in that folder if possible. What benefit would there be for that?

[re-fort]

I just felt it is unnecessary to separate it from the directory where .babelrc and .eslintrc.js are placed, but there is no further reason.

[SimulatedGREG]

Alright, I believe everything has been migrated over to a new single package.json setup and merged to the dev branch. There may still be a few issues here and there, so please do provide any feedback if you run into anything.