Skip to content

Project structure and use of npm #7

@elondaits

Description

@elondaits

I see something that I found a bit weird, but could be intentional: a node_modules directory in the repository with no package.json file.

Normally (and again, maybe this is intentional... in which case sorry for stating something which may be obvious) the way JS projects go is:

  • npm is used
  • A package.json file is created using npm init
  • Modules are added through npm install <module>, which automatically lists the dependency in the package.json file and installs them in node_modules.
  • node_modules is added to .gitignore so it never goes to the repository.
  • package.json and package-lock.json are commited to the repository...

... so whenever someone wants to use the project, they clone and then run npm install so all dependencies are automatically downloaded. node_modules is normally not placed in the repository, because it gets very big and it's all 3rd party code... plus, it might contain platform-specific code, since some modules use native code.

Now, use of npm modules (the ones that go in node_modules) creates some challenges for web applications... since this originally was a way to import modules into node.js, and not something designed for the web. The standard way to deal with these issues is to bundle code specifically for the web through a tool such as Webpack or Browserify. What these tools do (hope I'm not webplaining too much) is to go through the js code dependency tree (your code + modules) and create a single flat js file that has everything in it, with all module references "resolved"... said file can be included in the html. Sometimes this step also includes transpiling, to target the code for older browsers.

I simplified things a bit, but that's the basic thing. The main downside of this is that you have to add a compilation step, which can be made automatic but still can slow down the development process a bit. Another downside is that depending in which tool you use you might have to take some extra steps so your code gets published on github pages (basically because some tools, like webpack for instance, require that "compiled" code go into a separate directory and not the root of your project).

So, I understand that right now you're running some of the code through node.js ... but it's possible that you'll have to deal with these issues when moving it to the front end... and also, if you're incorporating more npm modules you'll want to use npm and package.json to avoid commiting platform-specific code, etc.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions