Search code examples
vue.jsbuildgitignorevue-cli

Building a distributed Vue CLI project when the build binary is included in gitignore?

New to Vue, and using @vue/cli 4.4.6.

I used Vue CLI to create my project, and noticed that under node_modules/.bin directory (that Vue CLI created), there is -- amongst many other binaries -- one called vue-cli-service that appears to be the Vue CLI build tool.

This is a bit strange to me, coming from a predominantly "backend" background using external build tools like Gradle, Maven and SBT, to have the build tool embedded inside a project! I would have expected a scenario where you download vue-cli-service as a command-line tool (just like I did with vue-cli) and then direct it at the project you want to build. But this would be like each and every Java project containing a copy of Gradle or Maven itself inside of it! Is this really the intention of a properly-formed Vue project or did I mess something up somehow?

I ask because vue create hello-world creates a .gitignore that specifically lists node_modules in it...

...so aren't these mutually exclusive conventions?

  1. vue create hello-world creates a "raw" (unbuilt) project that contains node_modules/.bin/vue-cli-service which appears to be the way to build it. but it also mentions node_modules in the .gitignore
  2. so Developer #1 creates a new project and is able to build it, and they push it to a git repo. Since node_modules is listed in the .gitignore, the build tool is not included in the push
  3. Developer #2 pulls the repo down to work on a new feature branch. But whoops. Since node_modules/.bin/vue-cli-service was ignored, they don't have it in their local branch, and so they can't build it.

I know I must be missing something here, I just don't know what it is. Anybody have any ideas?

Solution

  • It's common in Node projects for build utilities to be specified as devDependencies in the project's package.json, and this is acceptable because the utilities themselves are usually relatively small in size and quick to install. Only Node and a package manager (npm or yarn) should be preinstalled on a developer machine.

    Developers are expected to install these package.json dependencies to bootstrap development (using npm install or npm ci if a package-lock.json exists), similar to how prerequisite Gradle/Maven build plugins need to be installed post-clone for the project to build successfully. Each dependency's version string specified in the package.json (which is always commited to source control) ensures that all developers and CI are using the same version of the dependency.