docs/Nixpkgs/Languages-And-Frameworks/javascript.section/index.html

3998 lines
105 KiB
HTML

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Aux Documentation">
<meta name="author" content="Nixpkgs Aux, and Lix Contributors">
<link rel="canonical" href="https://docs.auxolotl.org/Nixpkgs/Languages-And-Frameworks/javascript.section/">
<link rel="prev" href="../java.section/">
<link rel="next" href="../julia.section/">
<link rel="icon" href="../../../assets/aux-logo.svg">
<meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.29">
<title>Javascript - Aux Docs</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.76a95c52.min.css">
<link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.bunny.net/css?family=IBM+Plex+Sans:300,300i,400,400i,700,700i%7CIBM+Plex+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"IBM Plex Sans";--md-code-font:"IBM Plex Mono"}</style>
<script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" >
<meta property="og:title" content="Javascript {#language-javascript} - Aux Docs" >
<meta property="og:description" content="Aux Documentation" >
<meta property="og:image" content="https://docs.auxolotl.org/assets/images/social/Nixpkgs/Languages-And-Frameworks/javascript.section.png" >
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="630" >
<meta property="og:url" content="https://docs.auxolotl.org/Nixpkgs/Languages-And-Frameworks/javascript.section/" >
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:title" content="Javascript {#language-javascript} - Aux Docs" >
<meta name="twitter:description" content="Aux Documentation" >
<meta name="twitter:image" content="https://docs.auxolotl.org/assets/images/social/Nixpkgs/Languages-And-Frameworks/javascript.section.png" >
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="blue">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#language-javascript" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../.." title="Aux Docs" class="md-header__button md-logo" aria-label="Aux Docs" data-md-component="logo">
<img src="../../../assets/aux-logo.svg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Aux Docs
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Javascript
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="blue" aria-label="Dark Mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Dark Mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="blue" aria-label="Light Mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Light Mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg>
</label>
</form>
<script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://git.auxolotl.org/auxolotl/docs" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.777 0a2.9 2.9 0 1 1-2.529 4.322H12.91a4.266 4.266 0 0 0-4.265 4.195v2.118a7.076 7.076 0 0 1 4.147-1.42l.118-.002h1.338a2.9 2.9 0 0 1 5.43 1.422 2.9 2.9 0 0 1-5.43 1.422H12.91a4.266 4.266 0 0 0-4.265 4.195v2.319A2.9 2.9 0 0 1 7.222 24 2.9 2.9 0 0 1 5.8 18.57V8.589a7.109 7.109 0 0 1 6.991-7.108l.118-.001h1.338A2.9 2.9 0 0 1 16.778 0ZM7.223 19.905a1.194 1.194 0 1 0 0 2.389 1.194 1.194 0 0 0 0-2.389Zm9.554-10.464a1.194 1.194 0 1 0 0 2.389 1.194 1.194 0 0 0 0-2.39Zm0-7.735a1.194 1.194 0 1 0 0 2.389 1.194 1.194 0 0 0 0-2.389Z"/></svg>
</div>
<div class="md-source__repository">
auxolotl/docs
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../.." class="md-tabs__link">
Aux Documentation Hub
</a>
</li>
<li class="md-tabs__item">
<a href="../../../TODO/" class="md-tabs__link">
TODO
</a>
</li>
<li class="md-tabs__item">
<a href="../../../Aux/" class="md-tabs__link">
Aux
</a>
</li>
<li class="md-tabs__item">
<a href="../../../Lix/" class="md-tabs__link">
Lix
</a>
</li>
<li class="md-tabs__item">
<a href="../../../NixOS/appstream/" class="md-tabs__link">
NixOS
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../../" class="md-tabs__link">
Nixpkgs
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../.." title="Aux Docs" class="md-nav__button md-logo" aria-label="Aux Docs" data-md-component="logo">
<img src="../../../assets/aux-logo.svg" alt="logo">
</a>
Aux Docs
</label>
<div class="md-nav__source">
<a href="https://git.auxolotl.org/auxolotl/docs" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.777 0a2.9 2.9 0 1 1-2.529 4.322H12.91a4.266 4.266 0 0 0-4.265 4.195v2.118a7.076 7.076 0 0 1 4.147-1.42l.118-.002h1.338a2.9 2.9 0 0 1 5.43 1.422 2.9 2.9 0 0 1-5.43 1.422H12.91a4.266 4.266 0 0 0-4.265 4.195v2.319A2.9 2.9 0 0 1 7.222 24 2.9 2.9 0 0 1 5.8 18.57V8.589a7.109 7.109 0 0 1 6.991-7.108l.118-.001h1.338A2.9 2.9 0 0 1 16.778 0ZM7.223 19.905a1.194 1.194 0 1 0 0 2.389 1.194 1.194 0 0 0 0-2.389Zm9.554-10.464a1.194 1.194 0 1 0 0 2.389 1.194 1.194 0 0 0 0-2.39Zm0-7.735a1.194 1.194 0 1 0 0 2.389 1.194 1.194 0 0 0 0-2.389Z"/></svg>
</div>
<div class="md-source__repository">
auxolotl/docs
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../.." class="md-nav__link">
<span class="md-ellipsis">
Aux Documentation Hub
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../TODO/" class="md-nav__link">
<span class="md-ellipsis">
TODO
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../Aux/" class="md-nav__link">
<span class="md-ellipsis">
Aux
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../Lix/" class="md-nav__link">
<span class="md-ellipsis">
Lix
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../NixOS/appstream/" class="md-nav__link">
<span class="md-ellipsis">
NixOS
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" checked>
<div class="md-nav__link md-nav__container">
<a href="../../" class="md-nav__link ">
<span class="md-ellipsis">
Nixpkgs
</span>
</a>
<label class="md-nav__link " for="__nav_6" id="__nav_6_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Nixpkgs
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../options/" class="md-nav__link">
<span class="md-ellipsis">
Options
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../Build-Helpers/" class="md-nav__link">
<span class="md-ellipsis">
Build Helpers
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../Development/" class="md-nav__link">
<span class="md-ellipsis">
Development
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../Functions/" class="md-nav__link">
<span class="md-ellipsis">
Functions
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../Hooks/" class="md-nav__link">
<span class="md-ellipsis">
Hooks
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_7" checked>
<div class="md-nav__link md-nav__container">
<a href="../" class="md-nav__link ">
<span class="md-ellipsis">
Languages And Frameworks
</span>
</a>
<label class="md-nav__link " for="__nav_6_7" id="__nav_6_7_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_7_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6_7">
<span class="md-nav__icon md-icon"></span>
Languages And Frameworks
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../agda.section/" class="md-nav__link">
<span class="md-ellipsis">
Agda
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../android.section/" class="md-nav__link">
<span class="md-ellipsis">
Android
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../beam.section/" class="md-nav__link">
<span class="md-ellipsis">
BEAM Languages (Erlang, Elixir &amp; LFE)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../bower.section/" class="md-nav__link">
<span class="md-ellipsis">
Bower
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../chicken.section/" class="md-nav__link">
<span class="md-ellipsis">
CHICKEN
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../coq.section/" class="md-nav__link">
<span class="md-ellipsis">
Coq and coq packages
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../crystal.section/" class="md-nav__link">
<span class="md-ellipsis">
Crystal
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cuda.section/" class="md-nav__link">
<span class="md-ellipsis">
CUDA
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cuelang.section/" class="md-nav__link">
<span class="md-ellipsis">
Cue (Cuelang)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dart.section/" class="md-nav__link">
<span class="md-ellipsis">
Dart
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dhall.section/" class="md-nav__link">
<span class="md-ellipsis">
Dhall
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dlang.section/" class="md-nav__link">
<span class="md-ellipsis">
D (Dlang)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet.section/" class="md-nav__link">
<span class="md-ellipsis">
Dotnet
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../emscripten.section/" class="md-nav__link">
<span class="md-ellipsis">
Emscripten
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../gnome.section/" class="md-nav__link">
<span class="md-ellipsis">
GNOME
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../go.section/" class="md-nav__link">
<span class="md-ellipsis">
Go
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../gradle.section/" class="md-nav__link">
<span class="md-ellipsis">
Gradle
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../hare.section/" class="md-nav__link">
<span class="md-ellipsis">
Hare
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../haskell.section/" class="md-nav__link">
<span class="md-ellipsis">
Haskell
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../hy.section/" class="md-nav__link">
<span class="md-ellipsis">
Hy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../idris.section/" class="md-nav__link">
<span class="md-ellipsis">
Idris
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../idris2.section/" class="md-nav__link">
<span class="md-ellipsis">
Idris2
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../ios.section/" class="md-nav__link">
<span class="md-ellipsis">
iOS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java.section/" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Javascript
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#javascript-introduction" class="md-nav__link">
<span class="md-ellipsis">
Introduction
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-finding-examples" class="md-nav__link">
<span class="md-ellipsis">
Getting unstuck / finding code examples
</span>
</a>
<nav class="md-nav" aria-label="Getting unstuck / finding code examples">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-finding-examples-github" class="md-nav__link">
<span class="md-ellipsis">
Github
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-finding-examples-gitlab" class="md-nav__link">
<span class="md-ellipsis">
Gitlab
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-tools-overview" class="md-nav__link">
<span class="md-ellipsis">
Tools overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-general-principles" class="md-nav__link">
<span class="md-ellipsis">
General principles
</span>
</a>
<nav class="md-nav" aria-label="General principles">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-upstream-node-version" class="md-nav__link">
<span class="md-ellipsis">
Try to use the same node version used upstream
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-upstream-package-manager" class="md-nav__link">
<span class="md-ellipsis">
Try to respect the package manager originally used by upstream (and use the upstream lock file)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-upstream-package-json" class="md-nav__link">
<span class="md-ellipsis">
Try to use upstream package.json
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-using-node_modules" class="md-nav__link">
<span class="md-ellipsis">
Using node_modules directly
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-packages-nixpkgs" class="md-nav__link">
<span class="md-ellipsis">
Javascript packages inside nixpkgs
</span>
</a>
<nav class="md-nav" aria-label="Javascript packages inside nixpkgs">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-adding-or-updating-packages" class="md-nav__link">
<span class="md-ellipsis">
Adding and Updating Javascript packages in nixpkgs
</span>
</a>
<nav class="md-nav" aria-label="Adding and Updating Javascript packages in nixpkgs">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-git-error" class="md-nav__link">
<span class="md-ellipsis">
Git protocol error
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-tool-specific" class="md-nav__link">
<span class="md-ellipsis">
Tool specific instructions
</span>
</a>
<nav class="md-nav" aria-label="Tool specific instructions">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage" class="md-nav__link">
<span class="md-ellipsis">
buildNpmPackage
</span>
</a>
<nav class="md-nav" aria-label="buildNpmPackage">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage-arguments" class="md-nav__link">
<span class="md-ellipsis">
Arguments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage-prefetch-npm-deps" class="md-nav__link">
<span class="md-ellipsis">
prefetch-npm-deps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage-fetchNpmDeps" class="md-nav__link">
<span class="md-ellipsis">
fetchNpmDeps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage-importNpmLock" class="md-nav__link">
<span class="md-ellipsis">
importNpmLock
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-corepack" class="md-nav__link">
<span class="md-ellipsis">
corepack
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-node2nix" class="md-nav__link">
<span class="md-ellipsis">
node2nix
</span>
</a>
<nav class="md-nav" aria-label="node2nix">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-node2nix-preparation" class="md-nav__link">
<span class="md-ellipsis">
Preparation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-node2nix-pitfalls" class="md-nav__link">
<span class="md-ellipsis">
Pitfalls
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-pnpm" class="md-nav__link">
<span class="md-ellipsis">
pnpm
</span>
</a>
<nav class="md-nav" aria-label="pnpm">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-pnpm-sourceRoot" class="md-nav__link">
<span class="md-ellipsis">
Dealing with sourceRoot
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn" class="md-nav__link">
<span class="md-ellipsis">
Yarn
</span>
</a>
<nav class="md-nav" aria-label="Yarn">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-yarnconfighook" class="md-nav__link">
<span class="md-ellipsis">
yarnConfigHook arguments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-yarnbuildhook" class="md-nav__link">
<span class="md-ellipsis">
yarnBuildHook arguments
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn2nix" class="md-nav__link">
<span class="md-ellipsis">
yarn2nix
</span>
</a>
<nav class="md-nav" aria-label="yarn2nix">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-yarn2nix-preparation" class="md-nav__link">
<span class="md-ellipsis">
Preparation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn2nix-mkYarnPackage" class="md-nav__link">
<span class="md-ellipsis">
mkYarnPackage
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn2nix-mkYarnModules" class="md-nav__link">
<span class="md-ellipsis">
mkYarnModules
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-mkYarnPackage-overriding-dependencies" class="md-nav__link">
<span class="md-ellipsis">
Overriding dependency behavior
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn2nix-pitfalls" class="md-nav__link">
<span class="md-ellipsis">
Pitfalls
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-outside-nixpkgs" class="md-nav__link">
<span class="md-ellipsis">
Outside Nixpkgs
</span>
</a>
<nav class="md-nav" aria-label="Outside Nixpkgs">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-npmlock2nix" class="md-nav__link">
<span class="md-ellipsis">
npmlock2nix
</span>
</a>
<nav class="md-nav" aria-label="npmlock2nix">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-npmlock2nix-pitfalls" class="md-nav__link">
<span class="md-ellipsis">
Pitfalls
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-nix-npm-buildpackage" class="md-nav__link">
<span class="md-ellipsis">
nix-npm-buildpackage
</span>
</a>
<nav class="md-nav" aria-label="nix-npm-buildpackage">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-nix-npm-buildpackage-pitfalls" class="md-nav__link">
<span class="md-ellipsis">
Pitfalls
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../julia.section/" class="md-nav__link">
<span class="md-ellipsis">
Julia
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../lisp.section/" class="md-nav__link">
<span class="md-ellipsis">
lisp-modules
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../lua.section/" class="md-nav__link">
<span class="md-ellipsis">
Lua
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../maven.section/" class="md-nav__link">
<span class="md-ellipsis">
Maven
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../nim.section/" class="md-nav__link">
<span class="md-ellipsis">
Nim
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../ocaml.section/" class="md-nav__link">
<span class="md-ellipsis">
OCaml
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../octave.section/" class="md-nav__link">
<span class="md-ellipsis">
Octave
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../perl.section/" class="md-nav__link">
<span class="md-ellipsis">
Perl
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php.section/" class="md-nav__link">
<span class="md-ellipsis">
PHP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../pkg-config.section/" class="md-nav__link">
<span class="md-ellipsis">
pkg-config
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python.section/" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../qt.section/" class="md-nav__link">
<span class="md-ellipsis">
Qt
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../r.section/" class="md-nav__link">
<span class="md-ellipsis">
R
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../ruby.section/" class="md-nav__link">
<span class="md-ellipsis">
Ruby
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust.section/" class="md-nav__link">
<span class="md-ellipsis">
Rust
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../scheme.section/" class="md-nav__link">
<span class="md-ellipsis">
Scheme
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../swift.section/" class="md-nav__link">
<span class="md-ellipsis">
Swift
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../texlive.section/" class="md-nav__link">
<span class="md-ellipsis">
TeX Live
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../titanium.section/" class="md-nav__link">
<span class="md-ellipsis">
Titanium
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../vim.section/" class="md-nav__link">
<span class="md-ellipsis">
Vim
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../Library-Reference/asserts/" class="md-nav__link">
<span class="md-ellipsis">
Library Reference
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../Module-System/module-system.chapter/" class="md-nav__link">
<span class="md-ellipsis">
Module System
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../Packages/" class="md-nav__link">
<span class="md-ellipsis">
Packages
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../Standard-Environment/" class="md-nav__link">
<span class="md-ellipsis">
Standard Environment
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../Using-Nixpkgs/" class="md-nav__link">
<span class="md-ellipsis">
Using Nixpkgs
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#javascript-introduction" class="md-nav__link">
<span class="md-ellipsis">
Introduction
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-finding-examples" class="md-nav__link">
<span class="md-ellipsis">
Getting unstuck / finding code examples
</span>
</a>
<nav class="md-nav" aria-label="Getting unstuck / finding code examples">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-finding-examples-github" class="md-nav__link">
<span class="md-ellipsis">
Github
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-finding-examples-gitlab" class="md-nav__link">
<span class="md-ellipsis">
Gitlab
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-tools-overview" class="md-nav__link">
<span class="md-ellipsis">
Tools overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-general-principles" class="md-nav__link">
<span class="md-ellipsis">
General principles
</span>
</a>
<nav class="md-nav" aria-label="General principles">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-upstream-node-version" class="md-nav__link">
<span class="md-ellipsis">
Try to use the same node version used upstream
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-upstream-package-manager" class="md-nav__link">
<span class="md-ellipsis">
Try to respect the package manager originally used by upstream (and use the upstream lock file)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-upstream-package-json" class="md-nav__link">
<span class="md-ellipsis">
Try to use upstream package.json
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-using-node_modules" class="md-nav__link">
<span class="md-ellipsis">
Using node_modules directly
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-packages-nixpkgs" class="md-nav__link">
<span class="md-ellipsis">
Javascript packages inside nixpkgs
</span>
</a>
<nav class="md-nav" aria-label="Javascript packages inside nixpkgs">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-adding-or-updating-packages" class="md-nav__link">
<span class="md-ellipsis">
Adding and Updating Javascript packages in nixpkgs
</span>
</a>
<nav class="md-nav" aria-label="Adding and Updating Javascript packages in nixpkgs">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-git-error" class="md-nav__link">
<span class="md-ellipsis">
Git protocol error
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-tool-specific" class="md-nav__link">
<span class="md-ellipsis">
Tool specific instructions
</span>
</a>
<nav class="md-nav" aria-label="Tool specific instructions">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage" class="md-nav__link">
<span class="md-ellipsis">
buildNpmPackage
</span>
</a>
<nav class="md-nav" aria-label="buildNpmPackage">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage-arguments" class="md-nav__link">
<span class="md-ellipsis">
Arguments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage-prefetch-npm-deps" class="md-nav__link">
<span class="md-ellipsis">
prefetch-npm-deps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage-fetchNpmDeps" class="md-nav__link">
<span class="md-ellipsis">
fetchNpmDeps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-buildNpmPackage-importNpmLock" class="md-nav__link">
<span class="md-ellipsis">
importNpmLock
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-corepack" class="md-nav__link">
<span class="md-ellipsis">
corepack
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-node2nix" class="md-nav__link">
<span class="md-ellipsis">
node2nix
</span>
</a>
<nav class="md-nav" aria-label="node2nix">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-node2nix-preparation" class="md-nav__link">
<span class="md-ellipsis">
Preparation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-node2nix-pitfalls" class="md-nav__link">
<span class="md-ellipsis">
Pitfalls
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-pnpm" class="md-nav__link">
<span class="md-ellipsis">
pnpm
</span>
</a>
<nav class="md-nav" aria-label="pnpm">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-pnpm-sourceRoot" class="md-nav__link">
<span class="md-ellipsis">
Dealing with sourceRoot
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn" class="md-nav__link">
<span class="md-ellipsis">
Yarn
</span>
</a>
<nav class="md-nav" aria-label="Yarn">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-yarnconfighook" class="md-nav__link">
<span class="md-ellipsis">
yarnConfigHook arguments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-yarnbuildhook" class="md-nav__link">
<span class="md-ellipsis">
yarnBuildHook arguments
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn2nix" class="md-nav__link">
<span class="md-ellipsis">
yarn2nix
</span>
</a>
<nav class="md-nav" aria-label="yarn2nix">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-yarn2nix-preparation" class="md-nav__link">
<span class="md-ellipsis">
Preparation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn2nix-mkYarnPackage" class="md-nav__link">
<span class="md-ellipsis">
mkYarnPackage
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn2nix-mkYarnModules" class="md-nav__link">
<span class="md-ellipsis">
mkYarnModules
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-mkYarnPackage-overriding-dependencies" class="md-nav__link">
<span class="md-ellipsis">
Overriding dependency behavior
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascript-yarn2nix-pitfalls" class="md-nav__link">
<span class="md-ellipsis">
Pitfalls
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-outside-nixpkgs" class="md-nav__link">
<span class="md-ellipsis">
Outside Nixpkgs
</span>
</a>
<nav class="md-nav" aria-label="Outside Nixpkgs">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-npmlock2nix" class="md-nav__link">
<span class="md-ellipsis">
npmlock2nix
</span>
</a>
<nav class="md-nav" aria-label="npmlock2nix">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-npmlock2nix-pitfalls" class="md-nav__link">
<span class="md-ellipsis">
Pitfalls
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#javascript-nix-npm-buildpackage" class="md-nav__link">
<span class="md-ellipsis">
nix-npm-buildpackage
</span>
</a>
<nav class="md-nav" aria-label="nix-npm-buildpackage">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#javascript-nix-npm-buildpackage-pitfalls" class="md-nav__link">
<span class="md-ellipsis">
Pitfalls
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="language-javascript">Javascript</h1>
<h2 id="javascript-introduction">Introduction</h2>
<p>This contains instructions on how to package javascript applications.</p>
<p>The various tools available will be listed in the <a href="#javascript-tools-overview">tools-overview</a>.
Some general principles for packaging will follow.
Finally some tool specific instructions will be given.</p>
<h2 id="javascript-finding-examples">Getting unstuck / finding code examples</h2>
<p>If you find you are lacking inspiration for packaging javascript applications, the links below might prove useful.
Searching online for prior art can be helpful if you are running into solved problems.</p>
<h3 id="javascript-finding-examples-github">Github</h3>
<ul>
<li>Searching Nix files for <code>mkYarnPackage</code>: <a href="https://github.com/search?q=mkYarnPackage+language%3ANix&amp;type=code">https://github.com/search?q=mkYarnPackage+language%3ANix&amp;type=code</a></li>
<li>Searching just <code>flake.nix</code> files for <code>mkYarnPackage</code>: <a href="https://github.com/search?q=mkYarnPackage+path%3A**%2Fflake.nix&amp;type=code">https://github.com/search?q=mkYarnPackage+path%3A**%2Fflake.nix&amp;type=code</a></li>
</ul>
<h3 id="javascript-finding-examples-gitlab">Gitlab</h3>
<ul>
<li>Searching Nix files for <code>mkYarnPackage</code>: <a href="https://gitlab.com/search?scope=blobs&amp;search=mkYarnPackage+extension%3Anix">https://gitlab.com/search?scope=blobs&amp;search=mkYarnPackage+extension%3Anix</a></li>
<li>Searching just <code>flake.nix</code> files for <code>mkYarnPackage</code>: <a href="https://gitlab.com/search?scope=blobs&amp;search=mkYarnPackage+filename%3Aflake.nix">https://gitlab.com/search?scope=blobs&amp;search=mkYarnPackage+filename%3Aflake.nix</a></li>
</ul>
<h2 id="javascript-tools-overview">Tools overview</h2>
<h2 id="javascript-general-principles">General principles</h2>
<p>The following principles are given in order of importance with potential exceptions.</p>
<h3 id="javascript-upstream-node-version">Try to use the same node version used upstream</h3>
<p>It is often not documented which node version is used upstream, but if it is, try to use the same version when packaging.</p>
<p>This can be a problem if upstream is using the latest and greatest and you are trying to use an earlier version of node.
Some cryptic errors regarding V8 may appear.</p>
<h3 id="javascript-upstream-package-manager">Try to respect the package manager originally used by upstream (and use the upstream lock file)</h3>
<p>A lock file (package-lock.json, yarn.lock...) is supposed to make reproducible installations of <code>node_modules</code> for each tool.</p>
<p>Guidelines of package managers, recommend to commit those lock files to the repos.
If a particular lock file is present, it is a strong indication of which package manager is used upstream.</p>
<p>It's better to try to use a Nix tool that understand the lock file.
Using a different tool might give you hard to understand error because different packages have been installed.
An example of problems that could arise can be found <a href="https://github.com/NixOS/nixpkgs/pull/126629">here</a>.
Upstream use npm, but this is an attempt to package it with <code>yarn2nix</code> (that uses yarn.lock).</p>
<p>Using a different tool forces to commit a lock file to the repository.
Those files are fairly large, so when packaging for nixpkgs, this approach does not scale well.</p>
<p>Exceptions to this rule are:</p>
<ul>
<li>When you encounter one of the bugs from a Nix tool. In each of the tool specific instructions, known problems will be detailed. If you have a problem with a particular tool, then it's best to try another tool, even if this means you will have to recreate a lock file and commit it to nixpkgs. In general <code>yarn2nix</code> has less known problems and so a simple search in nixpkgs will reveal many yarn.lock files committed.</li>
<li>Some lock files contain particular version of a package that has been pulled off npm for some reason. In that case, you can recreate upstream lock (by removing the original and <code>npm install</code>, <code>yarn</code>, ...) and commit this to nixpkgs.</li>
<li>The only tool that supports workspaces (a feature of npm that helps manage sub-directories with different package.json from a single top level package.json) is <code>yarn2nix</code>. If upstream has workspaces you should try <code>yarn2nix</code>.</li>
</ul>
<h3 id="javascript-upstream-package-json">Try to use upstream package.json</h3>
<p>Exceptions to this rule are:</p>
<ul>
<li>Sometimes the upstream repo assumes some dependencies be installed globally. In that case you can add them manually to the upstream package.json (<code>yarn add xxx</code> or <code>npm install xxx</code>, ...). Dependencies that are installed locally can be executed with <code>npx</code> for CLI tools. (e.g. <code>npx postcss ...</code>, this is how you can call those dependencies in the phases).</li>
<li>Sometimes there is a version conflict between some dependency requirements. In that case you can fix a version by removing the <code>^</code>.</li>
<li>Sometimes the script defined in the package.json does not work as is. Some scripts for example use CLI tools that might not be available, or cd in directory with a different package.json (for workspaces notably). In that case, it's perfectly fine to look at what the particular script is doing and break this down in the phases. In the build script you can see <code>build:*</code> calling in turns several other build scripts like <code>build:ui</code> or <code>build:server</code>. If one of those fails, you can try to separate those into,</li>
</ul>
<div class="highlight"><pre><span></span><code>yarn<span class="w"> </span>build:ui
yarn<span class="w"> </span>build:server
<span class="c1"># OR</span>
npm<span class="w"> </span>run<span class="w"> </span>build:ui
npm<span class="w"> </span>run<span class="w"> </span>build:server
</code></pre></div>
<p>when you need to override a package.json. It's nice to use the one from the upstream source and do some explicit override. Here is an example:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="ss">patchedPackageJSON</span> <span class="o">=</span> final<span class="o">.</span>runCommand <span class="s2">&quot;package.json&quot;</span> <span class="p">{</span> <span class="p">}</span> <span class="s s-Multiline">&#39;&#39;</span>
<span class="s s-Multiline"> </span><span class="si">${</span>jq<span class="si">}</span><span class="s s-Multiline">/bin/jq &#39;.version = &quot;0.4.0&quot; |</span>
<span class="s s-Multiline"> .devDependencies.&quot;@jsdoc/cli&quot; = &quot;^0.2.5&quot;</span>
<span class="s s-Multiline"> </span><span class="si">${</span>sonar-src<span class="si">}</span><span class="s s-Multiline">/package.json &gt; $out</span>
<span class="s s-Multiline"> &#39;&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>You will still need to commit the modified version of the lock files, but at least the overrides are explicit for everyone to see.</p>
<h3 id="javascript-using-node_modules">Using node_modules directly</h3>
<p>Each tool has an abstraction to just build the node_modules (dependencies) directory.
You can always use the <code>stdenv.mkDerivation</code> with the node_modules to build the package (symlink the node_modules directory and then use the package build command).
The node_modules abstraction can be also used to build some web framework frontends.
For an example of this see how <a href="https://github.com/NixOS/nixpkgs/blob/master/pkgs/servers/web-apps/plausible/default.nix">plausible</a> is built. <code>mkYarnModules</code> to make the derivation containing node_modules.
Then when building the frontend you can just symlink the node_modules directory.</p>
<h2 id="javascript-packages-nixpkgs">Javascript packages inside nixpkgs</h2>
<p>The <a href="https://github.com/NixOS/nixpkgs/blob/master/pkgs/development/node-packages">pkgs/development/node-packages</a> folder contains a generated collection of <a href="https://npmjs.com/">npm packages</a> that can be installed with the Nix package manager.</p>
<p>As a rule of thumb, the package set should only provide <em>end user</em> software packages, such as command-line utilities.
Libraries should only be added to the package set if there is a non-npm package that requires it.</p>
<p>When it is desired to use npm libraries in a development project, use the <code>node2nix</code> generator directly on the <code>package.json</code> configuration file of the project.</p>
<p>The package set provides support for the official stable Node.js versions.
The latest stable LTS release in <code>nodePackages</code>, as well as the latest stable current release in <code>nodePackages_latest</code>.</p>
<p>If your package uses native addons, you need to examine what kind of native build system it uses. Here are some examples:</p>
<ul>
<li><code>node-gyp</code></li>
<li><code>node-gyp-builder</code></li>
<li><code>node-pre-gyp</code></li>
</ul>
<p>After you have identified the correct system, you need to override your package expression while adding in build system as a build input.
For example, <code>dat</code> requires <code>node-gyp-build</code>, so we override its expression in <a href="https://github.com/NixOS/nixpkgs/blob/master/pkgs/development/node-packages/overrides.nix">pkgs/development/node-packages/overrides.nix</a>:</p>
<div class="highlight"><pre><span></span><code> <span class="p">{</span>
<span class="ss">dat</span> <span class="o">=</span> prev<span class="o">.</span>dat<span class="o">.</span>override <span class="p">(</span>oldAttrs<span class="p">:</span> <span class="p">{</span>
<span class="ss">buildInputs</span> <span class="o">=</span> <span class="p">[</span> final<span class="o">.</span>node-gyp-build pkgs<span class="o">.</span>libtool pkgs<span class="o">.</span>autoconf pkgs<span class="o">.</span>automake <span class="p">];</span>
<span class="ss">meta</span> <span class="o">=</span> oldAttrs<span class="o">.</span>meta <span class="o">//</span> <span class="p">{</span> <span class="ss">broken</span> <span class="o">=</span> since <span class="s2">&quot;12&quot;</span><span class="p">;</span> <span class="p">};</span>
<span class="p">});</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="javascript-adding-or-updating-packages">Adding and Updating Javascript packages in nixpkgs</h3>
<p>To add a package from npm to nixpkgs:</p>
<ol>
<li>Modify <a href="https://github.com/NixOS/nixpkgs/blob/master/pkgs/development/node-packages/node-packages.json">pkgs/development/node-packages/node-packages.json</a> to add, update or remove package entries to have it included in <code>nodePackages</code> and <code>nodePackages_latest</code>.</li>
<li>Run the script:</li>
</ol>
<div class="highlight"><pre><span></span><code>./pkgs/development/node-packages/generate.sh
</code></pre></div>
<ol>
<li>Build your new package to test your changes:</li>
</ol>
<div class="highlight"><pre><span></span><code>nix-build<span class="w"> </span>-A<span class="w"> </span>nodePackages.&lt;new-or-updated-package&gt;
</code></pre></div>
<div class="highlight"><pre><span></span><code>To build against the latest stable Current Node.js version (e.g. 18.x):
```sh
nix-build -A nodePackages_latest.&lt;new-or-updated-package&gt;
```
If the package doesn&#39;t build, you may need to add an override as explained above.
</code></pre></div>
<ol>
<li>If the package's name doesn't match any of the executables it provides, add an entry in <a href="https://github.com/NixOS/nixpkgs/blob/master/pkgs/development/node-packages/main-programs.nix">pkgs/development/node-packages/main-programs.nix</a>. This will be the case for all scoped packages, e.g., <code>@angular/cli</code>.</li>
<li>Add and commit all modified and generated files.</li>
</ol>
<p>For more information about the generation process, consult the <a href="https://github.com/svanderburg/node2nix">README.md</a> file of the <code>node2nix</code> tool.</p>
<p>To update npm packages in nixpkgs, run the same <code>generate.sh</code> script:</p>
<div class="highlight"><pre><span></span><code>./pkgs/development/node-packages/generate.sh
</code></pre></div>
<h4 id="javascript-git-error">Git protocol error</h4>
<p>Some packages may have Git dependencies from GitHub specified with <code>git://</code>.
GitHub has <a href="https://github.blog/2021-09-01-improving-git-protocol-security-github/#no-more-unauthenticated-git">disabled unencrypted Git connections</a>, so you may see the following error when running the generate script:</p>
<div class="highlight"><pre><span></span><code>The unauthenticated git protocol on port 9418 is no longer supported
</code></pre></div>
<p>Use the following Git configuration to resolve the issue:</p>
<div class="highlight"><pre><span></span><code>git<span class="w"> </span>config<span class="w"> </span>--global<span class="w"> </span>url.<span class="s2">&quot;https://github.com/&quot;</span>.insteadOf<span class="w"> </span>git://github.com/
</code></pre></div>
<h2 id="javascript-tool-specific">Tool specific instructions</h2>
<h3 id="javascript-buildNpmPackage">buildNpmPackage</h3>
<p><code>buildNpmPackage</code> allows you to package npm-based projects in Nixpkgs without the use of an auto-generated dependencies file (as used in <a href="#javascript-node2nix">node2nix</a>).
It works by utilizing npm's cache functionality -- creating a reproducible cache that contains the dependencies of a project, and pointing npm to it.</p>
<p>Here's an example:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span> lib<span class="p">,</span> buildNpmPackage<span class="p">,</span> fetchFromGitHub <span class="p">}:</span>
buildNpmPackage <span class="k">rec</span> <span class="p">{</span>
<span class="ss">pname</span> <span class="o">=</span> <span class="s2">&quot;flood&quot;</span><span class="p">;</span>
<span class="ss">version</span> <span class="o">=</span> <span class="s2">&quot;4.7.0&quot;</span><span class="p">;</span>
<span class="ss">src</span> <span class="o">=</span> fetchFromGitHub <span class="p">{</span>
<span class="ss">owner</span> <span class="o">=</span> <span class="s2">&quot;jesec&quot;</span><span class="p">;</span>
<span class="ss">repo</span> <span class="o">=</span> pname<span class="p">;</span>
<span class="ss">rev</span> <span class="o">=</span> <span class="s2">&quot;v</span><span class="si">${</span>version<span class="si">}</span><span class="s2">&quot;</span><span class="p">;</span>
<span class="ss">hash</span> <span class="o">=</span> <span class="s2">&quot;sha256-BR+ZGkBBfd0dSQqAvujsbgsEPFYw/ThrylxUbOksYxM=&quot;</span><span class="p">;</span>
<span class="p">};</span>
<span class="ss">npmDepsHash</span> <span class="o">=</span> <span class="s2">&quot;sha256-tuEfyePwlOy2/mOPdXbqJskO6IowvAP4DWg8xSZwbJw=&quot;</span><span class="p">;</span>
<span class="c1"># The prepack script runs the build script, which we&#39;d rather do in the build phase.</span>
<span class="ss">npmPackFlags</span> <span class="o">=</span> <span class="p">[</span> <span class="s2">&quot;--ignore-scripts&quot;</span> <span class="p">];</span>
<span class="ss">NODE_OPTIONS</span> <span class="o">=</span> <span class="s2">&quot;--openssl-legacy-provider&quot;</span><span class="p">;</span>
<span class="ss">meta</span> <span class="o">=</span> <span class="p">{</span>
<span class="ss">description</span> <span class="o">=</span> <span class="s2">&quot;Modern web UI for various torrent clients with a Node.js backend and React frontend&quot;</span><span class="p">;</span>
<span class="ss">homepage</span> <span class="o">=</span> <span class="s2">&quot;https://flood.js.org&quot;</span><span class="p">;</span>
<span class="ss">license</span> <span class="o">=</span> lib<span class="o">.</span>licenses<span class="o">.</span>gpl3Only<span class="p">;</span>
<span class="ss">maintainers</span> <span class="o">=</span> <span class="k">with</span> lib<span class="o">.</span>maintainers<span class="p">;</span> <span class="p">[</span> winter <span class="p">];</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div>
<p>In the default <code>installPhase</code> set by <code>buildNpmPackage</code>, it uses <code>npm pack --json --dry-run</code> to decide what files to install in <code>$out/lib/node_modules/$name/</code>, where <code>$name</code> is the <code>name</code> string defined in the package's <code>package.json</code>.
Additionally, the <code>bin</code> and <code>man</code> keys in the source's <code>package.json</code> are used to decide what binaries and manpages are supposed to be installed.
If these are not defined, <code>npm pack</code> may miss some files, and no binaries will be produced.</p>
<h4 id="javascript-buildNpmPackage-arguments">Arguments</h4>
<ul>
<li><code>npmDepsHash</code>: The output hash of the dependencies for this project. Can be calculated in advance with <a href="#javascript-buildNpmPackage-prefetch-npm-deps"><code>prefetch-npm-deps</code></a>.</li>
<li><code>makeCacheWritable</code>: Whether to make the cache writable prior to installing dependencies. Don't set this unless npm tries to write to the cache directory, as it can slow down the build.</li>
<li><code>npmBuildScript</code>: The script to run to build the project. Defaults to <code>"build"</code>.</li>
<li><code>npmWorkspace</code>: The workspace directory within the project to build and install.</li>
<li><code>dontNpmBuild</code>: Option to disable running the build script. Set to <code>true</code> if the package does not have a build script. Defaults to <code>false</code>. Alternatively, setting <code>buildPhase</code> explicitly also disables this.</li>
<li><code>dontNpmInstall</code>: Option to disable running <code>npm install</code>. Defaults to <code>false</code>. Alternatively, setting <code>installPhase</code> explicitly also disables this.</li>
<li><code>npmFlags</code>: Flags to pass to all npm commands.</li>
<li><code>npmInstallFlags</code>: Flags to pass to <code>npm ci</code>.</li>
<li><code>npmBuildFlags</code>: Flags to pass to <code>npm run ${npmBuildScript}</code>.</li>
<li><code>npmPackFlags</code>: Flags to pass to <code>npm pack</code>.</li>
<li><code>npmPruneFlags</code>: Flags to pass to <code>npm prune</code>. Defaults to the value of <code>npmInstallFlags</code>.</li>
<li><code>makeWrapperArgs</code>: Flags to pass to <code>makeWrapper</code>, added to executable calling the generated <code>.js</code> with <code>node</code> as an interpreter. These scripts are defined in <code>package.json</code>.</li>
<li><code>nodejs</code>: The <code>nodejs</code> package to build against, using the corresponding <code>npm</code> shipped with that version of <code>node</code>. Defaults to <code>pkgs.nodejs</code>.</li>
<li><code>npmDeps</code>: The dependencies used to build the npm package. Especially useful to not have to recompute workspace depedencies.</li>
</ul>
<h4 id="javascript-buildNpmPackage-prefetch-npm-deps">prefetch-npm-deps</h4>
<p><code>prefetch-npm-deps</code> is a Nixpkgs package that calculates the hash of the dependencies of an npm project ahead of time.</p>
<div class="highlight"><pre><span></span><code><span class="gp">$ </span>ls
<span class="go">package.json package-lock.json index.js</span>
<span class="gp">$ </span>prefetch-npm-deps<span class="w"> </span>package-lock.json
<span class="go">...</span>
<span class="go">sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=</span>
</code></pre></div>
<h4 id="javascript-buildNpmPackage-fetchNpmDeps">fetchNpmDeps</h4>
<p><code>fetchNpmDeps</code> is a Nix function that requires the following mandatory arguments:</p>
<ul>
<li><code>src</code>: A directory / tarball with <code>package-lock.json</code> file</li>
<li><code>hash</code>: The output hash of the node dependencies defined in <code>package-lock.json</code>.</li>
</ul>
<p>It returns a derivation with all <code>package-lock.json</code> dependencies downloaded into <code>$out/</code>, usable as an npm cache.</p>
<h4 id="javascript-buildNpmPackage-importNpmLock">importNpmLock</h4>
<p><code>importNpmLock</code> is a Nix function that requires the following optional arguments:</p>
<ul>
<li><code>npmRoot</code>: Path to package directory containing the source tree</li>
<li><code>package</code>: Parsed contents of <code>package.json</code></li>
<li><code>packageLock</code>: Parsed contents of <code>package-lock.json</code></li>
<li><code>pname</code>: Package name</li>
<li><code>version</code>: Package version</li>
</ul>
<p>It returns a derivation with a patched <code>package.json</code> &amp; <code>package-lock.json</code> with all dependencies resolved to Nix store paths.</p>
<p>This function is analogous to using <code>fetchNpmDeps</code>, but instead of specifying <code>hash</code> it uses metadata from <code>package.json</code> &amp; <code>package-lock.json</code>.</p>
<p>Note that <code>npmHooks.npmConfigHook</code> cannot be used with <code>importNpmLock</code>. You will instead need to use <code>importNpmLock.npmConfigHook</code>:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span> buildNpmPackage<span class="p">,</span> importNpmLock <span class="p">}:</span>
buildNpmPackage <span class="p">{</span>
<span class="ss">pname</span> <span class="o">=</span> <span class="s2">&quot;hello&quot;</span><span class="p">;</span>
<span class="ss">version</span> <span class="o">=</span> <span class="s2">&quot;0.1.0&quot;</span><span class="p">;</span>
<span class="ss">npmDeps</span> <span class="o">=</span> importNpmLock <span class="p">{</span>
<span class="ss">npmRoot</span> <span class="o">=</span> <span class="l">./.</span><span class="p">;</span>
<span class="p">};</span>
<span class="ss">npmConfigHook</span> <span class="o">=</span> importNpmLock<span class="o">.</span>npmConfigHook<span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<h3 id="javascript-corepack">corepack</h3>
<p>This package puts the corepack wrappers for pnpm and yarn in your PATH, and they will honor the <code>packageManager</code> setting in the <code>package.json</code>.</p>
<h3 id="javascript-node2nix">node2nix</h3>
<h4 id="javascript-node2nix-preparation">Preparation</h4>
<p>You will need to generate a Nix expression for the dependencies. Don't forget the <code>-l package-lock.json</code> if there is a lock file. Most probably you will need the <code>--development</code> to include the <code>devDependencies</code></p>
<p>So the command will most likely be:
<div class="highlight"><pre><span></span><code>node2nix<span class="w"> </span>--development<span class="w"> </span>-l<span class="w"> </span>package-lock.json
</code></pre></div></p>
<p>See <code>node2nix</code> <a href="https://github.com/svanderburg/node2nix">docs</a> for more info.</p>
<h4 id="javascript-node2nix-pitfalls">Pitfalls</h4>
<ul>
<li>If upstream package.json does not have a "version" attribute, <code>node2nix</code> will crash. You will need to add it like shown in <a href="#javascript-upstream-package-json">the package.json section</a>.</li>
<li><code>node2nix</code> has some <a href="https://github.com/svanderburg/node2nix/issues/238">bugs</a> related to working with lock files from npm distributed with <code>nodejs_16</code>.</li>
<li><code>node2nix</code> does not like missing packages from npm. If you see something like <code>Cannot resolve version: vue-loader-v16@undefined</code> then you might want to try another tool. The package might have been pulled off of npm.</li>
</ul>
<h3 id="javascript-pnpm">pnpm</h3>
<p>Pnpm is available as the top-level package <code>pnpm</code>. Additionally, there are variants pinned to certain major versions, like <code>pnpm_8</code> and <code>pnpm_9</code>, which support different sets of lock file versions.</p>
<p>When packaging an application that includes a <code>pnpm-lock.yaml</code>, you need to fetch the pnpm store for that project using a fixed-output-derivation. The functions <code>pnpm_8.fetchDeps</code> and <code>pnpm_9.fetchDeps</code> can create this pnpm store derivation. In conjunction, the setup hooks <code>pnpm_8.configHook</code> and <code>pnpm_9.configHook</code> will prepare the build environment to install the prefetched dependencies store. Here is an example for a package that contains a <code>package.json</code> and a <code>pnpm-lock.yaml</code> files using the above <code>pnpm_</code> attributes:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
stdenv<span class="p">,</span>
nodejs<span class="p">,</span>
<span class="c1"># This is pinned as { pnpm = pnpm_9; }</span>
pnpm
<span class="p">}:</span>
stdenv<span class="o">.</span>mkDerivation <span class="p">(</span>finalAttrs<span class="p">:</span> <span class="p">{</span>
<span class="ss">pname</span> <span class="o">=</span> <span class="s2">&quot;foo&quot;</span><span class="p">;</span>
<span class="ss">version</span> <span class="o">=</span> <span class="s2">&quot;0-unstable-1980-01-01&quot;</span><span class="p">;</span>
<span class="ss">src</span> <span class="o">=</span> <span class="o">...</span><span class="p">;</span>
<span class="ss">nativeBuildInputs</span> <span class="o">=</span> <span class="p">[</span>
nodejs
pnpm<span class="o">.</span>configHook
<span class="p">];</span>
<span class="ss">pnpmDeps</span> <span class="o">=</span> pnpm<span class="o">.</span>fetchDeps <span class="p">{</span>
<span class="k">inherit</span> <span class="p">(</span>finalAttrs<span class="p">)</span> pname version src<span class="p">;</span>
<span class="ss">hash</span> <span class="o">=</span> <span class="s2">&quot;...&quot;</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">})</span>
</code></pre></div>
<p>NOTE: It is highly recommended to use a pinned version of pnpm (i.e. <code>pnpm_8</code> or <code>pnpm_9</code>), to increase future reproducibility. It might also be required to use an older version, if the package needs support for a certain lock file version.</p>
<p>In case you are patching <code>package.json</code> or <code>pnpm-lock.yaml</code>, make sure to pass <code>finalAttrs.patches</code> to the function as well (i.e. <code>inherit (finalAttrs) patches</code>.</p>
<h4 id="javascript-pnpm-sourceRoot">Dealing with <code>sourceRoot</code></h4>
<p>NOTE: Nixpkgs pnpm tooling doesn't support building projects with a <code>pnpm-workspace.yaml</code>, or building monorepos. It maybe possible to use <code>pnpm.fetchDeps</code> for these projects, but it may be hard or impossible to produce a binary from such projects (<a href="https://github.com/NixOS/nixpkgs/pull/290715#issuecomment-2144543728">an example attempt</a>).</p>
<p>If the pnpm project is in a subdirectory, you can just define <code>sourceRoot</code> or <code>setSourceRoot</code> for <code>fetchDeps</code>. Note, that projects using <code>pnpm-workspace.yaml</code> are currently not supported, and will probably not work using this approach.
If <code>sourceRoot</code> is different between the parent derivation and <code>fetchDeps</code>, you will have to set <code>pnpmRoot</code> to effectively be the same location as it is in <code>fetchDeps</code>.</p>
<p>Assuming the following directory structure, we can define <code>sourceRoot</code> and <code>pnpmRoot</code> as follows:</p>
<div class="highlight"><pre><span></span><code>.
├── frontend
│   ├── ...
│   ├── package.json
│   └── pnpm-lock.yaml
└── ...
</code></pre></div>
<div class="highlight"><pre><span></span><code> <span class="o">...</span>
<span class="ss">pnpmDeps</span> <span class="o">=</span> pnpm<span class="o">.</span>fetchDeps <span class="p">{</span>
<span class="o">...</span>
<span class="ss">sourceRoot</span> <span class="o">=</span> <span class="s2">&quot;</span><span class="si">${</span>finalAttrs<span class="o">.</span>src<span class="o">.</span>name<span class="si">}</span><span class="s2">/frontend&quot;</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1"># by default the working directory is the extracted source</span>
<span class="ss">pnpmRoot</span> <span class="o">=</span> <span class="s2">&quot;frontend&quot;</span><span class="p">;</span>
</code></pre></div>
<h3 id="javascript-yarn">Yarn</h3>
<p>Yarn based projects use a <code>yarn.lock</code> file instead of a <code>package-lock.json</code> to pin dependencies. Nixpkgs provides the Nix function <code>fetchYarnDeps</code> which fetches an offline cache suitable for running <code>yarn install</code> before building the project. In addition, Nixpkgs provides the hooks:</p>
<ul>
<li><code>yarnConfigHook</code>: Fetches the dependencies from the offline cache and installs them into <code>node_modules</code>.</li>
<li><code>yarnBuildHook</code>: Runs <code>yarn build</code> or a specified <code>yarn</code> command that builds the project.</li>
</ul>
<p>An example usage of the above attributes is:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
lib<span class="p">,</span>
stdenv<span class="p">,</span>
fetchFromGitHub<span class="p">,</span>
fetchYarnDeps<span class="p">,</span>
yarnConfigHook<span class="p">,</span>
yarnBuildHook<span class="p">,</span>
nodejs<span class="p">,</span>
npmHooks<span class="p">,</span>
<span class="p">}:</span>
stdenv<span class="o">.</span>mkDerivation <span class="p">(</span>finalAttrs<span class="p">:</span> <span class="p">{</span>
<span class="ss">pname</span> <span class="o">=</span> <span class="s2">&quot;...&quot;</span><span class="p">;</span>
<span class="ss">version</span> <span class="o">=</span> <span class="s2">&quot;...&quot;</span><span class="p">;</span>
<span class="ss">src</span> <span class="o">=</span> fetchFromGitHub <span class="p">{</span>
<span class="ss">owner</span> <span class="o">=</span> <span class="s2">&quot;...&quot;</span><span class="p">;</span>
<span class="ss">repo</span> <span class="o">=</span> <span class="s2">&quot;...&quot;</span><span class="p">;</span>
<span class="ss">rev</span> <span class="o">=</span> <span class="s2">&quot;v</span><span class="si">${</span>finalAttrs<span class="o">.</span>version<span class="si">}</span><span class="s2">&quot;</span><span class="p">;</span>
<span class="ss">hash</span> <span class="o">=</span> <span class="s2">&quot;sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=&quot;</span><span class="p">;</span>
<span class="p">};</span>
<span class="ss">yarnOfflineCache</span> <span class="o">=</span> fetchYarnDeps <span class="p">{</span>
<span class="ss">yarnLock</span> <span class="o">=</span> finalAttrs<span class="o">.</span>src <span class="o">+</span> <span class="s2">&quot;/yarn.lock&quot;</span><span class="p">;</span>
<span class="ss">hash</span> <span class="o">=</span> <span class="s2">&quot;sha256-mo8urQaWIHu33+r0Y7mL9mJ/aSe/5CihuIetTeDHEUQ=&quot;</span><span class="p">;</span>
<span class="p">};</span>
<span class="ss">nativeBuildInputs</span> <span class="o">=</span> <span class="p">[</span>
yarnConfigHook
yarnBuildHook
<span class="c1"># Needed for executing package.json scripts</span>
nodejs
npmHooks<span class="o">.</span>npmInstallHook
<span class="p">];</span>
<span class="ss">meta</span> <span class="o">=</span> <span class="p">{</span>
<span class="c1"># ...</span>
<span class="p">};</span>
<span class="p">})</span>
</code></pre></div>
<p>Note that there is no setup hook for installing yarn based packages - <code>npmHooks.npmInstallHook</code> should fit most cases, but sometimes you may need to override the <code>installPhase</code> completely.</p>
<h4 id="javascript-yarnconfighook"><code>yarnConfigHook</code> arguments</h4>
<p>By default, <code>yarnConfigHook</code> relies upon the attribute <code>${yarnOfflineCache}</code> (or <code>${offlineCache}</code> if the former is not set) to find the location of the offline cache produced by <code>fetchYarnDeps</code>. To disable this phase, you can set <code>dontYarnInstallDeps = true</code> or override the <code>configurePhase</code>.</p>
<h4 id="javascript-yarnbuildhook"><code>yarnBuildHook</code> arguments</h4>
<p>This script by default runs <code>yarn --offline build</code>, and it relies upon the project's dependencies installed at <code>node_modules</code>. Below is a list of additional <code>mkDerivation</code> arguments read by this hook:</p>
<ul>
<li><code>yarnBuildScript</code>: Sets a different <code>yarn --offline</code> subcommand (defaults to <code>build</code>).</li>
<li><code>yarnBuildFlags</code>: Single string list of additional flags to pass the above command, or a Nix list of such additional flags.</li>
</ul>
<h3 id="javascript-yarn2nix">yarn2nix</h3>
<p>WARNING: The <code>yarn2nix</code> functions have been deprecated in favor of the new <code>yarnConfigHook</code> and <code>yarnBuildHook</code>. Documentation for them still appears here for the sake of the packages that still use them. See also a tracking issue <a href="https://github.com/NixOS/nixpkgs/issues/324246">#324246</a>.</p>
<h4 id="javascript-yarn2nix-preparation">Preparation</h4>
<p>You will need at least a <code>yarn.lock</code> file. If upstream does not have one you need to generate it and reference it in your package definition.</p>
<p>If the downloaded files contain the <code>package.json</code> and <code>yarn.lock</code> files they can be used like this:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="ss">offlineCache</span> <span class="o">=</span> fetchYarnDeps <span class="p">{</span>
<span class="ss">yarnLock</span> <span class="o">=</span> src <span class="o">+</span> <span class="s2">&quot;/yarn.lock&quot;</span><span class="p">;</span>
<span class="ss">hash</span> <span class="o">=</span> <span class="s2">&quot;....&quot;</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div>
<h4 id="javascript-yarn2nix-mkYarnPackage">mkYarnPackage</h4>
<p><code>mkYarnPackage</code> will by default try to generate a binary. For package only generating static assets (Svelte, Vue, React, WebPack, ...), you will need to explicitly override the build step with your instructions.</p>
<p>It's important to use the <code>--offline</code> flag. For example if you script is <code>"build": "something"</code> in <code>package.json</code> use:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="ss">buildPhase</span> <span class="o">=</span> <span class="s s-Multiline">&#39;&#39;</span>
<span class="s s-Multiline"> export HOME=$(mktemp -d)</span>
<span class="s s-Multiline"> yarn --offline build</span>
<span class="s s-Multiline"> &#39;&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>The <code>distPhase</code> is packing the package's dependencies in a tarball using <code>yarn pack</code>. You can disable it using:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="ss">doDist</span> <span class="o">=</span> <span class="no">false</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>The configure phase can sometimes fail because it makes many assumptions which may not always apply. One common override is:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="ss">configurePhase</span> <span class="o">=</span> <span class="s s-Multiline">&#39;&#39;</span>
<span class="s s-Multiline"> ln -s $node_modules node_modules</span>
<span class="s s-Multiline"> &#39;&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>or if you need a writeable node_modules directory:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="ss">configurePhase</span> <span class="o">=</span> <span class="s s-Multiline">&#39;&#39;</span>
<span class="s s-Multiline"> cp -r $node_modules node_modules</span>
<span class="s s-Multiline"> chmod +w node_modules</span>
<span class="s s-Multiline"> &#39;&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<h4 id="javascript-yarn2nix-mkYarnModules">mkYarnModules</h4>
<p>This will generate a derivation including the <code>node_modules</code> directory.
If you have to build a derivation for an integrated web framework (rails, phoenix..), this is probably the easiest way.</p>
<h4 id="javascript-mkYarnPackage-overriding-dependencies">Overriding dependency behavior</h4>
<p>In the <code>mkYarnPackage</code> record the property <code>pkgConfig</code> can be used to override packages when you encounter problems building.</p>
<p>For instance, say your package is throwing errors when trying to invoke node-sass:</p>
<div class="highlight"><pre><span></span><code>ENOENT: no such file or directory, scandir &#39;/build/source/node_modules/node-sass/vendor&#39;
</code></pre></div>
<p>To fix this we will specify different versions of build inputs to use, as well as some post install steps to get the software built the way we want:</p>
<div class="highlight"><pre><span></span><code>mkYarnPackage <span class="k">rec</span> <span class="p">{</span>
<span class="ss">pkgConfig</span> <span class="o">=</span> <span class="p">{</span>
<span class="ss">node-sass</span> <span class="o">=</span> <span class="p">{</span>
<span class="ss">buildInputs</span> <span class="o">=</span> <span class="k">with</span> final<span class="p">;[</span> python libsass pkg-config <span class="p">];</span>
<span class="ss">postInstall</span> <span class="o">=</span> <span class="s s-Multiline">&#39;&#39;</span>
<span class="s s-Multiline"> LIBSASS_EXT=auto yarn --offline run build</span>
<span class="s s-Multiline"> rm build/config.gypi</span>
<span class="s s-Multiline"> &#39;&#39;</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div>
<h4 id="javascript-yarn2nix-pitfalls">Pitfalls</h4>
<ul>
<li>If version is missing from upstream package.json, yarn will silently install nothing. In that case, you will need to override package.json as shown in the <a href="#javascript-upstream-package-json">package.json section</a></li>
<li>Having trouble with <code>node-gyp</code>? Try adding these lines to the <code>yarnPreBuild</code> steps:</li>
</ul>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="ss">yarnPreBuild</span> <span class="o">=</span> <span class="s s-Multiline">&#39;&#39;</span>
<span class="s s-Multiline"> mkdir -p $HOME/.node-gyp/</span><span class="si">${</span>nodejs<span class="o">.</span>version<span class="si">}</span>
<span class="s s-Multiline"> echo 9 &gt; $HOME/.node-gyp/</span><span class="si">${</span>nodejs<span class="o">.</span>version<span class="si">}</span><span class="s s-Multiline">/installVersion</span>
<span class="s s-Multiline"> ln -sfv </span><span class="si">${</span>nodejs<span class="si">}</span><span class="s s-Multiline">/include $HOME/.node-gyp/</span><span class="si">${</span>nodejs<span class="o">.</span>version<span class="si">}</span>
<span class="s s-Multiline"> export npm_config_nodedir=</span><span class="si">${</span>nodejs<span class="si">}</span>
<span class="s s-Multiline"> &#39;&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<ul>
<li>The <code>echo 9</code> steps comes from this answer: <a href="https://stackoverflow.com/a/49139496">https://stackoverflow.com/a/49139496</a></li>
<li>Exporting the headers in <code>npm_config_nodedir</code> comes from this issue: <a href="https://github.com/nodejs/node-gyp/issues/1191#issuecomment-301243919">https://github.com/nodejs/node-gyp/issues/1191#issuecomment-301243919</a></li>
<li><code>offlineCache</code> (described <a href="#javascript-yarn2nix-preparation">above</a>) must be specified to avoid <a href="#ssec-import-from-derivation">Import From Derivation</a> (IFD) when used inside Nixpkgs.</li>
</ul>
<h2 id="javascript-outside-nixpkgs">Outside Nixpkgs</h2>
<p>There are some other tools available, which are written in the Nix language.
These that can't be used inside Nixpkgs because they require <a href="#ssec-import-from-derivation">Import From Derivation</a>, which is not allowed in Nixpkgs.</p>
<p>If you are packaging something outside Nixpkgs, consider the following:</p>
<h3 id="javascript-npmlock2nix">npmlock2nix</h3>
<p><a href="https://github.com/nix-community/npmlock2nix">npmlock2nix</a> aims at building <code>node_modules</code> without code generation. It hasn't reached v1 yet, the API might be subject to change.</p>
<h4 id="javascript-npmlock2nix-pitfalls">Pitfalls</h4>
<p>There are some <a href="https://github.com/tweag/npmlock2nix/issues/45">problems with npm v7</a>.</p>
<h3 id="javascript-nix-npm-buildpackage">nix-npm-buildpackage</h3>
<p><a href="https://github.com/serokell/nix-npm-buildpackage">nix-npm-buildpackage</a> aims at building <code>node_modules</code> without code generation. It hasn't reached v1 yet, the API might change. It supports both <code>package-lock.json</code> and yarn.lock.</p>
<h4 id="javascript-nix-npm-buildpackage-pitfalls">Pitfalls</h4>
<p>There are some <a href="https://github.com/serokell/nix-npm-buildpackage/issues/33">problems with npm v7</a>.</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Licenced MIT
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-social">
<a href="https://git.auxolotl.org/auxolotl/docs" target="_blank" rel="noopener" title="Aux Docs Repo" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.777 0a2.9 2.9 0 1 1-2.529 4.322H12.91a4.266 4.266 0 0 0-4.265 4.195v2.118a7.076 7.076 0 0 1 4.147-1.42l.118-.002h1.338a2.9 2.9 0 0 1 5.43 1.422 2.9 2.9 0 0 1-5.43 1.422H12.91a4.266 4.266 0 0 0-4.265 4.195v2.319A2.9 2.9 0 0 1 7.222 24 2.9 2.9 0 0 1 5.8 18.57V8.589a7.109 7.109 0 0 1 6.991-7.108l.118-.001h1.338A2.9 2.9 0 0 1 16.778 0ZM7.223 19.905a1.194 1.194 0 1 0 0 2.389 1.194 1.194 0 0 0 0-2.389Zm9.554-10.464a1.194 1.194 0 1 0 0 2.389 1.194 1.194 0 0 0 0-2.39Zm0-7.735a1.194 1.194 0 1 0 0 2.389 1.194 1.194 0 0 0 0-2.389Z"/></svg>
</a>
<a href="https://forum.aux.computer/" target="_blank" rel="noopener" title="Aux Forum" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563a7.395 7.395 0 0 0-6.337 3.57 7.247 7.247 0 0 0-.148 7.22L4.4 19.61l4.794-1.074a7.424 7.424 0 0 0 8.136-1.39 7.256 7.256 0 0 0 1.737-7.997 7.375 7.375 0 0 0-6.84-4.585h-.008z"/></svg>
</a>
<a href="https://wiki.auxolotl.org/" target="_blank" rel="noopener" title="Aux Wiki" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.801 13.557c.148.098.288.202.417.313 1.854 1.6 3.127 4.656 2.582 7.311-1.091-.255-5.747-1.055-7.638-3.383-.91-1.12-1.366-2.081-1.569-2.885a5.65 5.65 0 0 0 .034-.219c.089.198.197.35.313.466.24.24.521.335.766.372.304.046.594-.006.806-.068l.001.001c.05-.015.433-.116.86-.342.325-.173 2.008-.931 3.428-1.566Zm-7.384 1.435C9.156 16.597 6.6 18.939.614 18.417c.219-1.492 1.31-3.019 2.51-4.11.379-.345.906-.692 1.506-1.009.286.168.598.332.939.486 2.689 1.221 3.903 1.001 4.89.573a1.3 1.3 0 0 0 .054-.025 6.156 6.156 0 0 0-.096.66Zm4.152-.462c.38-.341.877-.916 1.383-1.559-.389-.15-.866-.371-1.319-.591-.598-.29-1.305-.283-2.073-.315a4.685 4.685 0 0 1-.804-.103c.014-.123.027-.246.038-.369.062.104.673.057.871.057.354 0 1.621.034 3.074-.574 1.452-.608 2.55-1.706 3.022-3.225.474-1.52.22-3.091-.168-3.952-.169.709-1.453 2.381-1.926 2.871-.473.489-2.381 2.296-2.972 2.921-.7.74-.688.793-1.332 1.302-.202.19-.499.402-.563.53.027-.338.039-.675.027-.997a7.653 7.653 0 0 0-.032-.523c.322-.059.567-.522.567-.861 0-.224-.106-.247-.271-.229.075-.894.382-3.923 1.254-4.281.218.109.831.068.649-.295-.182-.364-.825-.074-1.081.266-.28.374-.956 2.046-.92 4.324-.113.014-.174.033-.322.033-.171 0-.321-.04-.433-.05.034-2.275-.714-3.772-.84-4.169-.12-.375-.491-.596-.781-.596-.146 0-.272.056-.333.179-.182.363.459.417.677.308.706.321 1.156 3.519 1.254 4.277-.125-.006-.199.035-.199.233 0 .311.17.756.452.843a.442.442 0 0 0-.007.03s-.287.99-.413 2.189a4.665 4.665 0 0 1-.718-.225c-.714-.286-1.355-.583-2.019-.566-.664.018-1.366.023-1.804-.036-.438-.058-.649-.15-.649-.15s-.234.365.257 1.075c.42.607 1.055 1.047 1.644 1.18.589.134 1.972.18 2.785-.377.16-.109.317-.228.459-.34a8.717 8.717 0 0 0-.013.626c-.289.753-.571 1.993-.268 3.338 0-.001.701-.842.787-2.958.006-.144.009-.271.01-.383.052-.248.103-.518.148-.799.072.135.151.277.234.413.511.842 1.791 1.37 2.383 1.49.091.019.187.032.285.038Zm-1.12.745c-.188.055-.445.1-.713.059-.21-.031-.45-.11-.655-.316-.169-.168-.312-.419-.401-.789a9.837 9.837 0 0 0 .039-.82l.049-.243c.563.855 1.865 1.398 2.476 1.522.036.008.072.014.109.02l-.013.009c-.579.415-.76.503-.891.558Zm6.333-2.818c-.257.114-4.111 1.822-5.246 2.363.98-.775 3.017-3.59 3.699-4.774 1.062.661 1.468 1.109 1.623 1.441.101.217.09.38.096.515a.57.57 0 0 1-.172.455Zm-9.213 1.62a1.606 1.606 0 0 1-.19.096c-.954.414-2.126.61-4.728-.571-2.023-.918-3.024-2.157-3.371-2.666.476.161 1.471.473 2.157.524.282.021.703.068 1.167.125.021.209.109.486.345.829l.001.001c.451.651 1.134 1.119 1.765 1.262.622.141 2.083.182 2.942-.407a3.12 3.12 0 0 0 .132-.093l.001.179a6.052 6.052 0 0 0-.221.721Zm5.512-1.271a17.49 17.49 0 0 1-1.326-.589c.437.042 1.054.083 1.692.108-.121.162-.244.323-.366.481Zm.932-1.26c-.12.17-.245.343-.373.517-.241.018-.478.03-.709.038a29.05 29.05 0 0 1-.741-.048c.608-.065 1.228-.252 1.823-.507Zm.22-.315c-.809.382-1.679.648-2.507.648-.472 0-.833.018-1.139.039v.001c-.324-.031-.665-.039-1.019-.054a3.555 3.555 0 0 1-.152-.009c.102-.002.192-.006.249-.006.363 0 1.662.034 3.151-.589 1.508-.632 2.645-1.773 3.136-3.351.37-1.186.31-2.402.086-3.312.458-.336.86-.651 1.147-.91.501-.451.743-.733.848-.869.199.206.714.864.685 2.138-.036 1.611-.606 3.187-1.501 4.154a9.099 9.099 0 0 1-1.321 1.132 11.978 11.978 0 0 0-.644-.422l-.089-.055-.051.091c-.184.332-.5.825-.879 1.374ZM4.763 5.817c-.157 1.144.113 2.323.652 3.099.539.776 2.088 2.29 3.614 2.505.991.14 2.055.134 2.055.134s-.593-.576-1.114-1.66c-.521-1.085-.948-2.104-1.734-2.786-.785-.681-1.601-1.416-2.045-1.945-.444-.53-.59-.86-.59-.86s-.656.175-.838 1.513Zm14.301 4.549a9.162 9.162 0 0 0 1.3-1.12c.326-.352.611-.782.845-1.265 1.315.145 2.399.371 2.791.434 0 0-.679 1.971-3.945 3.022l-.016-.035c-.121-.26-.385-.594-.975-1.036Zm-11.634.859a8.537 8.537 0 0 1-.598-.224c-1.657-.693-2.91-1.944-3.449-3.678-.498-1.601-.292-3.251.091-4.269.225.544.758 1.34 1.262 2.01a3.58 3.58 0 0 0-.172.726c-.163 1.197.123 2.428.687 3.24.416.599 1.417 1.62 2.555 2.193-.128.002-.253.003-.376.002Zm-1.758-.077c-.958-.341-1.901-.787-2.697-1.368C-.07 7.559 0 6.827 0 6.827s1.558-.005 3.088.179c.03.126.065.251.104.377.557 1.791 1.851 3.086 3.562 3.803l.047.019a4.254 4.254 0 0 1-.267-.026h-.001c-.401-.053-.595-.135-.595-.135l-.157-.069-.092.144-.017.029Zm6.807-1.59c.086.017.136.058.136.145 0 .197-.242.5-.597.597l-.01-.161a.887.887 0 0 0 .283-.243c.078-.099.142-.217.188-.338Zm-1.591.006c.033.1.076.197.129.282.061.097.134.18.217.24l-.021.083c-.276-.093-.424-.293-.424-.466 0-.078.035-.119.099-.139Zm-.025-.664c-.275-.816-.795-2.022-1.505-2.179-.296.072-.938.096-.691-.145.246-.24 1.085-.048 1.283.217.145.194.744.806 1.011 1.737l.032.227a.324.324 0 0 0-.13.143Zm1.454-.266c.251-.99.889-1.639 1.039-1.841.197-.265 1.036-.457 1.283-.217.247.241-.395.217-.691.145-.69.152-1.2 1.296-1.481 2.109a.364.364 0 0 0-.067-.059.37.37 0 0 0-.092-.043l.009-.094Zm4.802-2.708a9.875 9.875 0 0 1-.596.705c-.304.315-1.203 1.176-1.963 1.916.647-.955 1.303-1.806 2.184-2.376.123-.08.249-.161.375-.245Z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../../..", "features": ["content.tooltips", "search.highlight", "navigation.tabs", "navigation.indexes", "navigation.prune"], "search": "../../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../../assets/javascripts/bundle.fe8b6f2b.min.js"></script>
</body>
</html>