<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kiki Luo</title>
    <description>The latest articles on DEV Community by Kiki Luo (@yutzi).</description>
    <link>https://dev.to/yutzi</link>
    <image>
      <url>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%2F1181227%2F0c18c228-9764-489e-8677-c105f376ec3f.jpeg</url>
      <title>DEV Community: Kiki Luo</title>
      <link>https://dev.to/yutzi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/yutzi"/>
    <language>en</language>
    <item>
      <title>Archieved</title>
      <dc:creator>Kiki Luo</dc:creator>
      <pubDate>Thu, 26 Oct 2023 06:51:32 +0000</pubDate>
      <link>https://dev.to/yutzi/let-me-try-to-compare-the-event-loop-to-a-shipping-service-1b32</link>
      <guid>https://dev.to/yutzi/let-me-try-to-compare-the-event-loop-to-a-shipping-service-1b32</guid>
      <description></description>
    </item>
    <item>
      <title>⭐️ Why Does the Same package.json Install Different node_modules❓You Need to Understand package-lock.json❗️</title>
      <dc:creator>Kiki Luo</dc:creator>
      <pubDate>Tue, 17 Oct 2023 08:11:15 +0000</pubDate>
      <link>https://dev.to/yutzi/why-does-the-same-packagejson-install-different-nodemodulesyou-need-to-understand-package-lockjson-3an4</link>
      <guid>https://dev.to/yutzi/why-does-the-same-packagejson-install-different-nodemodulesyou-need-to-understand-package-lockjson-3an4</guid>
      <description>&lt;p&gt;If you're a JavaScript Developer, you've probably heard of npm (node package manger). It's a tool that helps us quickly include third-party libraries in our project. &lt;/p&gt;

&lt;p&gt;But do you understand two important file: package.json and package-lock.json? Do you really know all the package version you are installing? &lt;/p&gt;

&lt;p&gt;&lt;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%2Fuploads%2Farticles%2Fg8bc7it3xtk26iffk53o.png" class="article-body-image-wrapper"&gt;&lt;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%2Fuploads%2Farticles%2Fg8bc7it3xtk26iffk53o.png" alt="npm for node package manager"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Potential Issues With package.json
&lt;/h2&gt;

&lt;p&gt;Inside the package.json, we specify which version of packages to install. However, using special version notation like "^0.2.3" (which installs a version greater than or equal to 0.2.3 but less than 0.3.0) can lead to different node_modules using the same package.json file due to timing differences. &lt;/p&gt;

&lt;p&gt;This increase the risk.&lt;/p&gt;

&lt;p&gt;&lt;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%2Fuploads%2Farticles%2Fsevxj8w93ct0j07zu6rt.png" class="article-body-image-wrapper"&gt;&lt;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%2Fuploads%2Farticles%2Fsevxj8w93ct0j07zu6rt.png" alt="same code lead to different result"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How package-lock.json File Helps Lock Dependencies
&lt;/h2&gt;

&lt;p&gt;When you make changes to package.json and run npm install, a file called package-lock.json is automatically generated.&lt;/p&gt;

&lt;p&gt;Uploading package-lock.json to your source repository ensures other developers that clone your code will install the same package dependencies as you used during development.&lt;/p&gt;

&lt;p&gt;This consistency is crucial during the continuous integration (CI) process, as dependencies won't vary due to different environments.&lt;/p&gt;

&lt;p&gt;Other purposes of package-lock.json include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You can check package-lock.json to understand the previous state of node_modules.&lt;/li&gt;
&lt;li&gt;Make it easier to observe and detect changes when modifying or upgrading package versions.&lt;/li&gt;
&lt;li&gt;Allow npm to skip redundant metadata resolutions for faster package installation.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Do You Understand package-lock.json?
&lt;/h2&gt;

&lt;p&gt;Do you know what each section represents ? Here are the meanings and examples of common items : &lt;/p&gt;

&lt;p&gt;&lt;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%2Fuploads%2Farticles%2Fwduf2xmmcqsfvurb969j.png" class="article-body-image-wrapper"&gt;&lt;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%2Fuploads%2Farticles%2Fwduf2xmmcqsfvurb969j.png" alt="example of package-lock.json file -1"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;name:&lt;/strong&gt; The project name of the source repositories, matching the one in package.json.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;version:&lt;/strong&gt; The project version of the source repositories, consistent with package.json (you can update version numbers in package.json).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;lockfileVersion:&lt;/strong&gt; The format of package-lock.json changes with npm versions. You can determine which npm version created the file using lockfileVersion. &lt;br&gt;
For npm v5 and v6, it's lockfileVersion: 1; for npm v7 and v8, it's lockfileVersion: 2 (backwards compatible with v1 lockfiles); and for npm v9, it's lockfileVersion: 3 (backwards compatible with npm v7).&lt;/p&gt;

&lt;p&gt;&lt;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%2Fuploads%2Farticles%2Fuffl22s8q8ob9fy6jaww.png" class="article-body-image-wrapper"&gt;&lt;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%2Fuploads%2Farticles%2Fuffl22s8q8ob9fy6jaww.png" alt="example of package-lock.json file -2"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;packages&lt;/strong&gt;: This section indicates the relationships between packages and related informations.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The information for the root project (your source repository) is listed under an empty string key ("").&lt;/li&gt;
&lt;li&gt;Third-party packages are listed under this section based on their relative paths to the project folder.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;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%2Fuploads%2Farticles%2Fkof25hx6hul1yt7nj8j1.png" class="article-body-image-wrapper"&gt;&lt;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%2Fuploads%2Farticles%2Fkof25hx6hul1yt7nj8j1.png" alt="example of package-lock.json file -3"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Package descriptors&lt;/strong&gt; contain the following information:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;version:&lt;/strong&gt; The versions of these packages.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;resolved:&lt;/strong&gt; The location from which these packages were resolved.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;integrity:&lt;/strong&gt; A string (sha512 or sha1) used to mark the unpacked artifact.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;bin, license, engines, dependencies, optionalDependencies:&lt;/strong&gt; Information that corresponds to the package.json of each package.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>npm</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
