The latest articles on Forem by Kate (@katepapineni). https://forem.com/katepapineni https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F428787%2F3f317b1e-b28f-411c-8580-72c6e7277385.png https://forem.com/katepapineni en Kate Mon, 07 Sep 2020 00:29:43 +0000 https://forem.com/katepapineni/how-to-check-for-missing-unused-or-out-of-date-javascript-dependencies-34i5 https://forem.com/katepapineni/how-to-check-for-missing-unused-or-out-of-date-javascript-dependencies-34i5 <blockquote> <p>Managing dependencies is very important to developing and maintaining a JavaScript application. Here are three quick tips to help with checking for missing, unused, or out-of-date dependencies!</p> </blockquote> <h2> Want to check a project for dependencies missing from the package.json? </h2> <h3> Use <a href="https://www.npmjs.com/package/depcheck" rel="noopener noreferrer">depcheck</a>! </h3> <p>Install the <code>Depcheck</code> tool to analyze JavaScript projects for dependencies missing from the <code>package.json</code>.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fusa3yux0yhw4f885s9du.jpeg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fusa3yux0yhw4f885s9du.jpeg" alt="console output"></a></p> <ul> <li>Any <code>npm</code> packages that are missing from the <code>package.json</code> file and the associated JavaScript file path where the package is used are listed. The packages can then be installed using the <a href="https://docs.npmjs.com/cli/install.html" rel="noopener noreferrer">npm-install</a> command.</li> </ul> <h2> Want to check a project for unused dependencies? </h2> <h3> Use <a href="https://www.npmjs.com/package/depcheck" rel="noopener noreferrer">depcheck</a>! </h3> <p><code>Depcheck</code> also analyzes JavaScript projects for unused dependencies. </p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fclk168o761zwc80uy0c3.jpeg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fclk168o761zwc80uy0c3.jpeg" alt="console output"></a></p> <ul> <li>The unused <code>npm</code> packages are listed and it is safe to remove these from the project by running the <a href="https://docs.npmjs.com/cli/uninstall.html" rel="noopener noreferrer">npm-uninstall</a> command. </li> </ul> <h2> Want check a project for out-of-date dependencies? </h2> <h3> Use <a href="https://docs.npmjs.com/cli-commands/outdated.html" rel="noopener noreferrer">npm-outdated</a>! </h3> <p>This command will check the registry and compare with the versions specified in the <code>package.json</code> file. Simply run the command <code>npm outdated</code> in the same directory as the project <code>package.json</code>. </p> <p>Given this <code>package.json</code>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>{ "@material-ui/core": "^4.10.0", "@okta/okta-react": "1.1.4", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "axios": "^0.19.2" } </code></pre> </div> <p>Here is the <code>npm outdated</code> output:<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F5cgig3ki8lqhfphaojge.jpeg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F5cgig3ki8lqhfphaojge.jpeg" alt="console output"></a></p> <ul> <li><p><code>Red</code> means update now -&gt; A newer version is available matching the specified <code>package.json</code> version so this should be updated now.</p></li> <li><p><code>Yellow</code> means use caution -&gt; A newer version is available above the specified <code>package.json</code> version. Make sure to test your application with the higher package version to ensure there are no breaking changes introduced when updating.</p></li> <li><p>Use the <a href="https://docs.npmjs.com/cli-commands/update.html" rel="noopener noreferrer">npm-update</a> command to update the dependencies accordingly.</p></li> </ul> <blockquote> <p><span>Cover image by <a href="https://unsplash.com/@wordsmithmedia?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer">Allie</a> on <a href="https://unsplash.com/s/photos/coffee-computer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer">Unsplash</a></span></p> </blockquote> javascript node npm codenewbie