Simple Intro to Node.js, npm, and webpack
This was originally written for fellow Duolingo employees and therefore assumes that the reader is familiar with Python.
What’s Node.js? Why are we using it?
python terminal command. Running
node without arguments will start an interactive JS shell, and running
node foobar.js will execute the contents of foobar.js, printing any output to stdout.
Node.js is not a webserver, a web app framework, or the name of a file.
What’s the point of having a JS interpreter outside of your browser? Many web development tools (e.g. Less) are written in JS. Why weren’t those tools written in C++, Python, etc.? Approximately 100% of the open-source web community knows JS; no other language comes close.
What’s npm? Why are we using it?
npm (“node package manager”) is the most widely used JS equivalent of Python’s pip. Main differences:
npm records installed packages in a file called package.json, while pip traditionally stores them in a file called requirements.txt.
npm installwill install all packages listed in the current directory’s package.json. The pip equivalent is
pip install -r requirements.txt.
npm installs packages into the current directory’s node_modules/ subdirectory, creating it if necessary. pip installs packages at a location within the current Python installation itself.
Python projects typically use a virtualenv so that project-specific libraries don’t clutter your system’s main Python installation. Since npm installs to the current directory’s node_modules/ by default, any directory with a node_modules/ subdirectory is effectively its own contained environment.
Very rarely, you want a package to be globally available. With pip you run
pip install foobaroutside of any virtualenv; with npm you run
npm install -g foobarfrom any directory.
What’s webpack? Why are we using it?
Webpack is a build system like Make or Gradle. At a minimum, we need it for combining hundreds of JS source files into a few that we send to the browser. It does so by implementing a module import system—a fairly universal language feature that vanilla JS doesn’t yet provide.
The other main feature of webpack that we currently use is
webpack-dev-server, a companion tool that can automatically build our JS and serve it from localhost:9091. This separation from the Paste server drastically reduces the time wasted on local server reloads because:
- Paste no longer reloads our Python backend whenever you make a JS change
- Paste no longer rebuilds our entire JS codebase whenever you make a Python change
- webpack-dev-server rebuilds only the edited module, not our entire JS codebase