Dependency Refactors

[iwilsonq]

Hiya, make sure your text editor (I use VSCode) is set up to use eslint. This'll save you some headaches later by helping you conform to a code style guide.

Starting with package.json, it looks like there are some dependencies that should be devDependencies instead, that way they don't get built into the production bundle.

• babel-core
• babel-loader
• babel-preset-env
• babel-preset-react
• css-loader
• file-loader
• style-loader
• webpack

Likewise, there are some dependencies that don't seem to be in use right now which could be removed, such as:

• path
• body-parser

It looks like path is being used inside webpack.config.js, but it is not an npm module; it is a built-in Node module. Let me explain a little:

When you develop your React application locally with webpack, you are basically running a Node.js server (a dev server). In other words, your code inside webpack.config.js can access the core Node.js modules that your browser (and thus, all of your frontend code), cannot access.

Code that is ran by Node.js can access things like the file system, cryptography, and HTTP request handling. A pure React or vanilla JS frontend app cannot do these things, not without making calls to a server to handle them.

So you can use code like const path = require('path') inside webpack.config.js because it is ran with Node.js, but you cannot use that same require statement in any of your React source code because it is built to run in the browser.

tldr; you don't need to npm install the 'path' module 😄

[Heathercoraje]

So you can use code like const path = require('path') inside webpack.config.js because it is ran with Node.js @iwilsonq Meaning, as webpack congif are ran within node environment, no need to installing them devDependency, right?

[Heathercoraje]

@iwilsonq At the end of the day, codes will be compiled with all style and es6 loaded from /dist under production environment, What is the factor to determine to include under devDependency or dependency?

[iwilsonq]

Anything used in production that doesnt need to be installed for a production build can be a devDependency. All of the build process stuff like babel or webpack or its many loaders (like css-loader) can be kept in devDependencies. If its a regular dependency, itll get installed in your production build, creating code bloat. It probably wont break something but its nice to know which tools assist you in development and which you want for production.

Any kind of react component or frontend library will be a regular dependency.

[Heathercoraje]

@iwilsonq I understand therefore all react-related libraries are regular dependency. How about uuid? it is used inside browser as it communicated with localStorage, therefore regular dependency?

[iwilsonq]

Yep, uuid will almost always be a dependency since its mainly used by production code, namely "create" apis.