D3 + JavaScript Tooling's Not (Just) For Unicorns

A horrible introduction to using modern JavaScript tooling with D3

Chapter 6

Dependencies

After you did your npm install eslint, two things happened

  1. Your package.json changed, and
  2. a new directory showed up - node_modules

Let’s talk about the first one.

If you look at package.json, you’ll see a new section called either devDependencies or dependencies (this changes if you used --save-dev or not). Dependencies are the modules that your project depends on.

As you install more and more modules, this list gets longer and longer. The funny part about this, though, is that it isn’t all of the modules that are installed.

Take a peek inside of node_modules - this is where all of your modules (aka packages!) live after they are installed. See how much stuff is hiding in there? Every folder is a single module.

Mine has approximately ten thousand things inside, even though we only installed eslint, and we only have one dependency listed!

acorn-jsx       figures         path-is-absolute
ajv         file-entry-cache      path-is-inside
ajv-keywords        flat-cache        path-key
ansi-escapes        fs.realpath       pify
ansi-regex        functional-red-black-tree   pinkie
ansi-styles       glob          pinkie-promise
argparse        globals         pluralize
array-union       globby          prelude-ls
array-uniq        graceful-fs       progress
arrify          has-flag        punycode
balanced-match        iconv-lite        regexpp
brace-expansion       ignore          require-uncached
caller-path       imurmurhash       resolve-from
callsites       inflight        restore-cursor
chalk         inherits        rimraf
chardet         inquirer        run-async
circular-json       is-fullwidth-code-point     rxjs
cli-cursor        is-path-cwd       safer-buffer
cli-width       is-path-in-cwd        semver
color-convert       is-path-inside        shebang-command
color-name        is-promise        shebang-regex
concat-map        is-resolvable       signal-exit
cross-spawn       isexe         slice-ansi
debug         js-tokens       sprintf-js
deep-is         js-yaml         string-width
del         json-schema-traverse      strip-ansi
doctrine        json-stable-stringify-without-jsonify strip-json-comments
escape-string-regexp      levn          supports-color
eslint          lodash          table
eslint-scope        mimic-fn        text-table
eslint-utils        minimatch       through
eslint-visitor-keys     minimist        tmp
espree          mkdirp          tslib
esprima         ms          type-check
esquery         mute-stream       uri-js
esrecurse       natural-compare       which
estraverse        nice-try        wordwrap
esutils         object-assign       wrappy
external-editor       once          write

Oof! Welcome to node.js, land of millions of modules!

Your code only depends on eslint, but eslint depends on other modules, and those modules depend on other modules, and it goes down and down and down until you have ten million modules in node_modules and every other programming language is rolling its eyes at you.

But that’s okay, because we’re MODERN JAVASCRIPT DEVELOPERS!!!!

Now that we have eslint installed, let’s figure out how to use it.