docs/dependencies.html - third_party/github/bazel-contrib/rules_nodejs - Git at Google

 <!DOCTYPE html>
 <html itemscope itemtype="https://schema.org/WebPage" lang="en">
 <head>
   <meta charset="utf-8">
   <meta content="IE=edge" http-equiv="X-UA-Compatible">
   <meta content="width=device-width, initial-scale=1" name="viewport">
   <link href="/rules_nodejs/dependencies.html" rel="canonical">
   <link href="" rel="shortcut icon" type="image/png">

   <title>rules_nodejs - Dependencies</title>

   <!-- Webfont -->
   <link href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,500,700|Open+Sans:400,600,700,800" rel="stylesheet">

   <!-- Bootstrap -->
   <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet">

   <!-- Font Awesome -->
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
   <![endif]-->

   <!-- Custom stylesheet -->
   <link href="/rules_nodejs/css/main.css" rel="stylesheet">

   <!-- metadata -->
   <meta content="rules_nodejs" name="og:title"/>
   <meta content="JavaScript and NodeJS rules for Bazel" name="og:description"/>
 </head>

 <body>
 <nav class="navbar navbar-inverse navbar-fixed-top" id="common-nav">
   <div class="container">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
       <button class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"
               type="button">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="/rules_nodejs/">
         <img class="navbar-logo" src="/rules_nodejs/images/bazel-navbar.svg">
       </a>
     </div>

     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <form class="navbar-form navbar-right" action="/rules_nodejs/search.html" id="cse-search-box">
         <div class="form-group">
           <input type="hidden" name="cx" value="2735dc72dd157bd19">
           <input type="search" name="q" id="q" class="form-control input-sm" placeholder="Search">
         </div>
       </form>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="https://github.com/bazelbuild/rules_nodejs">GitHub</a></li>
       </ul>
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
 </nav>


 <div class="container vpad">
   <div class="row">
     <div class="col-md-2">
   <a aria-controls="sidebar-nav"
      aria-expanded="false" class="btn btn-default btn-lg btn-block sidebar-toggle" data-toggle="collapse"
      href="#sidebar-nav">
     <i class="glyphicon glyphicon-menu-hamburger"></i> Navigation
   </a>

   <nav class="sidebar collapse" id="sidebar-nav">
     <h3>rules_nodejs</h3>
     <ul class="sidebar-nav">
       <li><a href="/rules_nodejs/">Introduction</a></li>
       <li><a href="install.html">Installation</a></li>
       <li><a href="repositories.html">Repositories</a></li>
       <li><a href="dependencies.html">Dependencies</a></li>
       <li><a href="debugging.html">Debugging</a></li>
       <li><a href="stamping.html">Stamping</a></li>
       <li><a href="changing-rules.html">Making changes to rules_nodejs</a></li>
       <li><a href="examples.html">Examples</a></li>
     </ul>

     <h3>Rules</h3>
     <ul class="sidebar-nav">


       <li><a href="/rules_nodejs/Built-ins.html">Built-ins</a></li>


       <li><a href="/rules_nodejs/Cypress.html">Cypress</a></li>


       <li><a href="/rules_nodejs/Jasmine.html">Jasmine</a></li>


       <li><a href="/rules_nodejs/Karma.html">Karma</a></li>


       <li><a href="/rules_nodejs/Labs.html">Labs</a></li>


       <li><a href="/rules_nodejs/Protractor.html">Protractor</a></li>


       <li><a href="/rules_nodejs/Rollup.html">Rollup</a></li>


       <li><a href="/rules_nodejs/Terser.html">Terser</a></li>


       <li><a href="/rules_nodejs/TypeScript.html">TypeScript</a></li>


     </ul>

     <h3>Community</h3>
     <ul class="sidebar-nav">
       <li><a href="https://github.com/bazelbuild/rules_nodejs/blob/master/CONTRIBUTING.md">Contribute to
         rules_nodejs</a></li>
       <li><a href="https://slack.bazel.build">Join #javascript on Slack</a></li>
       <li><a href="https://github.com/bazelbuild/rules_nodejs/issues">Issue Tracker</a></li>
       <li><a href="https://github.com/bazelbuild/rules_nodejs">Github</a></li>
     </ul>
   </nav>
 </div>


     <div class="col-md-8">
       <div class="content">
         <h1 id="dependencies">Dependencies</h1>

 <p>Bazel works alongside your existing package manager, either npm or yarn.
 You manage your <code class="language-plaintext highlighter-rouge">package.json</code> file, editing by hand or by running commands like <code class="language-plaintext highlighter-rouge">npm install</code> or <code class="language-plaintext highlighter-rouge">yarn add</code>.
 The package manager will also write a lock file, indicating exact versions for all transitive dependencies, which keeps your build hermetic and reproducible.
 Bazel will run the package manager when the <code class="language-plaintext highlighter-rouge">package.json</code> or <code class="language-plaintext highlighter-rouge">*lock.json</code> files change, but you can also run the package manager yourself.</p>

 <h2 id="bazel-managed-vs-self-managed-dependencies">Bazel-managed vs self-managed dependencies</h2>

 <p>You have two options for managing your <code class="language-plaintext highlighter-rouge">node_modules</code> dependencies: Bazel-managed or self-managed.</p>

 <p>With the Bazel-managed dependencies approach, Bazel is responsible for making sure that <code class="language-plaintext highlighter-rouge">node_modules</code> is
 up to date with your <code class="language-plaintext highlighter-rouge">package[-lock].json</code> or <code class="language-plaintext highlighter-rouge">yarn.lock</code> files. This means Bazel will set it up when the
 repository is first cloned, and rebuild it whenever it changes. With the <code class="language-plaintext highlighter-rouge">yarn_install</code> or <code class="language-plaintext highlighter-rouge">npm_install</code>
 repository rules, Bazel will setup your <code class="language-plaintext highlighter-rouge">node_modules</code> for you in an external workspace named after the
 repository rule. For example, a <code class="language-plaintext highlighter-rouge">yarn_install(name = "npm", ...)</code> will setup an external
 workspace named <code class="language-plaintext highlighter-rouge">@npm</code> with the <code class="language-plaintext highlighter-rouge">node_modules</code> folder inside of it as well as generating targets for each
 root npm package in <code class="language-plaintext highlighter-rouge">node_modules</code> for use as dependencies to other rules.</p>

 <p>For Bazel to provide the strongest guarantees about reproducibility and the
 fidelity of your build, it is recommended that you use Bazel-managed dependencies.
 This approach also allows you to use the generated fine-grained npm package dependencies
 which can significantly reduce the number of inputs to actions, making Bazel sand-boxing and
 remote-execution faster if there are a large number of files under <code class="language-plaintext highlighter-rouge">node_modules</code>.</p>

 <blockquote>
   <p>Note that as of Bazel 0.26, and with the recommended <code class="language-plaintext highlighter-rouge">managed_directories</code> attribute on the <code class="language-plaintext highlighter-rouge">workspace</code> rule in <code class="language-plaintext highlighter-rouge">/WORKSPACE</code>,
 the Bazel-managed <code class="language-plaintext highlighter-rouge">node_modules</code> directory is placed in your workspace root in the standard location used by npm or yarn.</p>
 </blockquote>

 <h2 id="using-bazel-managed-dependencies">Using Bazel-managed dependencies</h2>

 <p>To have Bazel manage its own copy of <code class="language-plaintext highlighter-rouge">node_modules</code>, which is useful to avoid
 juggling multiple toolchains, you can add one of the following to your <code class="language-plaintext highlighter-rouge">WORKSPACE</code>
 file:</p>

 <p>Using Yarn (preferred):</p>

 <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">load</span><span class="p">(</span><span class="s">"@build_bazel_rules_nodejs//:index.bzl"</span><span class="p">,</span> <span class="s">"yarn_install"</span><span class="p">)</span>

 <span class="n">yarn_install</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"npm"</span><span class="p">,</span>
     <span class="n">package_json</span> <span class="o">=</span> <span class="s">"//:package.json"</span><span class="p">,</span>
     <span class="n">yarn_lock</span> <span class="o">=</span> <span class="s">"//:yarn.lock"</span><span class="p">,</span>
 <span class="p">)</span>
 </code></pre></div></div>

 <p>Using NPM:</p>

 <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">load</span><span class="p">(</span><span class="s">"@build_bazel_rules_nodejs//:index.bzl"</span><span class="p">,</span> <span class="s">"npm_install"</span><span class="p">)</span>

 <span class="n">npm_install</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"npm"</span><span class="p">,</span>
     <span class="n">package_json</span> <span class="o">=</span> <span class="s">"//:package.json"</span><span class="p">,</span>
     <span class="n">package_lock_json</span> <span class="o">=</span> <span class="s">"//:package-lock.json"</span><span class="p">,</span>
 <span class="p">)</span>
 </code></pre></div></div>

 <blockquote>
   <p>If you don’t need to pass any arguments to <code class="language-plaintext highlighter-rouge">node_repositories</code>,
   you can skip calling that function. <code class="language-plaintext highlighter-rouge">yarn_install</code> and <code class="language-plaintext highlighter-rouge">npm_install</code> will do it by default.</p>
 </blockquote>

 <p>You should now add the <code class="language-plaintext highlighter-rouge">@npm</code> workspace to the <code class="language-plaintext highlighter-rouge">managed_directories</code> option in the <code class="language-plaintext highlighter-rouge">workspace</code> rule at the top of the file. This tells Bazel that the <code class="language-plaintext highlighter-rouge">node_modules</code> directory is special and is managed by the package manager.
 Add the <code class="language-plaintext highlighter-rouge">workspace</code> rule if it isn’t already in your <code class="language-plaintext highlighter-rouge">/WORKSPACE</code> file.</p>

 <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">workspace</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"my_wksp"</span><span class="p">,</span>
     <span class="n">managed_directories</span> <span class="o">=</span> <span class="p">{</span><span class="s">"@npm"</span><span class="p">:</span> <span class="p">[</span><span class="s">"node_modules"</span><span class="p">]},</span>
 <span class="p">)</span>
 </code></pre></div></div>

 <p>As of Bazel 0.26 this feature is still experimental, so also add this line to the <code class="language-plaintext highlighter-rouge">.bazelrc</code> to opt-in:</p>

 <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>common --experimental_allow_incremental_repository_updates
 </code></pre></div></div>

 <h3 id="yarn_install-vs-npm_install">yarn_install vs. npm_install</h3>

 <p><code class="language-plaintext highlighter-rouge">yarn_install</code> is the preferred rule for setting up Bazel-managed dependencies for a number of reasons:</p>

 <ul>
   <li><code class="language-plaintext highlighter-rouge">yarn_install</code> will use the global yarn cache by default which will improve your build performance (this can be turned off with the <code class="language-plaintext highlighter-rouge">use_global_yarn_cache</code> attribute)</li>
   <li>npm has a known peer dependency hoisting issue that can lead to missing peer dependencies in some cases (see https://github.com/bazelbuild/rules_nodejs/issues/416)</li>
 </ul>

 <h3 id="fine-grained-npm-package-dependencies">Fine-grained npm package dependencies</h3>

 <p>You can then reference individual npm packages in your <code class="language-plaintext highlighter-rouge">BUILD</code> rules via:</p>

 <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">load</span><span class="p">(</span><span class="s">"@build_bazel_rules_nodejs//:index.bzl"</span><span class="p">,</span> <span class="s">"nodejs_binary"</span><span class="p">)</span>

 <span class="n">nodejs_binary</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"bar"</span><span class="p">,</span>
     <span class="n">data</span> <span class="o">=</span> <span class="p">[</span>
       <span class="s">"@npm//foo"</span><span class="p">,</span>
       <span class="s">"@npm//baz"</span><span class="p">,</span>
     <span class="p">]</span>
     <span class="p">...</span>
 <span class="p">)</span>
 </code></pre></div></div>

 <p>In this case, the <code class="language-plaintext highlighter-rouge">bar</code> nodejs_binary depends only the <code class="language-plaintext highlighter-rouge">foo</code> and <code class="language-plaintext highlighter-rouge">baz</code> npm packages
 and all of their transitive deps.</p>

 <p>For other rules such as <code class="language-plaintext highlighter-rouge">jasmine_node_test</code>, fine grained
 npm dependencies are specified in the <code class="language-plaintext highlighter-rouge">deps</code> attribute:</p>

 <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">jasmine_node_test</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"test"</span><span class="p">,</span>
     <span class="p">...</span>
     <span class="n">deps</span> <span class="o">=</span> <span class="p">[</span>
         <span class="s">"@npm//jasmine"</span><span class="p">,</span>
         <span class="s">"@npm//foo"</span><span class="p">,</span>
         <span class="s">"@npm//baz"</span><span class="p">,</span>
         <span class="p">...</span>
     <span class="p">],</span>
 <span class="p">)</span>
 </code></pre></div></div>

 <h3 id="multiple-sets-of-npm-dependencies">Multiple sets of npm dependencies</h3>

 <p>If your workspace has multiple applications, each with their own <code class="language-plaintext highlighter-rouge">package.json</code>
 and npm deps, <code class="language-plaintext highlighter-rouge">yarn_install</code> (or <code class="language-plaintext highlighter-rouge">npm_install</code>) can be called separately for
 each.</p>

 <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">workspace</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"my_wksp"</span><span class="p">,</span>
     <span class="n">managed_directories</span> <span class="o">=</span> <span class="p">{</span>
         <span class="s">"@app1_npm"</span><span class="p">:</span> <span class="p">[</span><span class="s">"app1/node_modules"</span><span class="p">],</span>
         <span class="s">"@app2_npm"</span><span class="p">:</span> <span class="p">[</span><span class="s">"app2/node_modules"</span><span class="p">],</span>
     <span class="p">},</span>
 <span class="p">)</span>

 <span class="n">yarn_install</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"app1_npm"</span><span class="p">,</span>
     <span class="n">package_json</span> <span class="o">=</span> <span class="s">"//app1:package.json"</span><span class="p">,</span>
     <span class="n">yarn_lock</span> <span class="o">=</span> <span class="s">"//app1:yarn.lock"</span><span class="p">,</span>
 <span class="p">)</span>

 <span class="n">yarn_install</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"app2_npm"</span><span class="p">,</span>
     <span class="n">package_json</span> <span class="o">=</span> <span class="s">"//app2:package.json"</span><span class="p">,</span>
     <span class="n">yarn_lock</span> <span class="o">=</span> <span class="s">"//app2:yarn.lock"</span><span class="p">,</span>
 <span class="p">)</span>
 </code></pre></div></div>

 <p>Your application would then reference its deps as (for example) <code class="language-plaintext highlighter-rouge">@app1_npm//lodash</code>, or <code class="language-plaintext highlighter-rouge">@app2_npm//jquery</code>.</p>

 <h3 id="fine-grained-npm-package-nodejs_binary-targets">Fine-grained npm package nodejs_binary targets</h3>

 <p>If an npm package lists one or more <code class="language-plaintext highlighter-rouge">bin</code> entry points in its <code class="language-plaintext highlighter-rouge">package.json</code>,
 <code class="language-plaintext highlighter-rouge">nodejs_binary</code> targets will be generated for these.</p>

 <p>For example, the <code class="language-plaintext highlighter-rouge">protractor</code> package has two bin entries in its <code class="language-plaintext highlighter-rouge">package.json</code>:</p>

 <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="w">  </span><span class="nl">"bin"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
     </span><span class="nl">"protractor"</span><span class="p">:</span><span class="w"> </span><span class="s2">"bin/protractor"</span><span class="p">,</span><span class="w">
     </span><span class="nl">"webdriver-manager"</span><span class="p">:</span><span class="w"> </span><span class="s2">"bin/webdriver-manager"</span><span class="w">
   </span><span class="p">}</span><span class="err">,</span><span class="w">
 </span></code></pre></div></div>

 <p>These will result in two generated <code class="language-plaintext highlighter-rouge">nodejs_binary</code> targets in the <code class="language-plaintext highlighter-rouge">@npm//protractor/bin</code>
 package (if your npm deps workspace is <code class="language-plaintext highlighter-rouge">@npm</code>):</p>

 <ul>
   <li><code class="language-plaintext highlighter-rouge">@npm//protractor/bin:protractor</code></li>
   <li><code class="language-plaintext highlighter-rouge">@npm//protractor/bin:webdriver-manager</code></li>
 </ul>

 <p>These targets can be used as executables for actions in custom rules or can
 be run by Bazel directly. For example, you can run protractor with the
 following:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>bazel run @npm//protractor/bin:protractor
 </code></pre></div></div>

 <p>Note: These targets are in the <code class="language-plaintext highlighter-rouge">protractor/bin</code> package so they don’t
 conflict with the targets to use in deps[]. For example, <code class="language-plaintext highlighter-rouge">@npm//protractor:protractor</code>
 is target to use in deps[] while <code class="language-plaintext highlighter-rouge">@npm//protractor/bin:protractor</code> is the binary target.</p>

 <h3 id="coarse-node_modules-dependencies">Coarse node_modules dependencies</h3>

 <p>Using fine grained npm dependencies is recommended to minimize
 the number of inputs to your rules. However, for backward compatibility
 there are also filegroups defined by <code class="language-plaintext highlighter-rouge">yarn_install</code> and <code class="language-plaintext highlighter-rouge">npm_install</code>
 that include all packages under <code class="language-plaintext highlighter-rouge">node_modules</code> and which can be used
 with the <code class="language-plaintext highlighter-rouge">node_modules</code> attribute of nodejs rules.</p>

 <ul>
   <li><code class="language-plaintext highlighter-rouge">@npm//:node_modules</code> includes all packages under <code class="language-plaintext highlighter-rouge">node_modules</code> as well as the <code class="language-plaintext highlighter-rouge">.bin</code> folder</li>
 </ul>

 <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">load</span><span class="p">(</span><span class="s">"@build_bazel_rules_nodejs//:index.bzl"</span><span class="p">,</span> <span class="s">"nodejs_binary"</span><span class="p">)</span>

 <span class="n">nodejs_binary</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"bar"</span><span class="p">,</span>
     <span class="n">node_modules</span> <span class="o">=</span> <span class="s">"@npm//:node_modules"</span><span class="p">,</span>
 <span class="p">)</span>
 </code></pre></div></div>

 <h2 id="using-self-managed-dependencies">Using self-managed dependencies</h2>

 <p>If you’d like to have Bazel use the <code class="language-plaintext highlighter-rouge">node_modules</code> directory you are managing,
 then next you will create a <code class="language-plaintext highlighter-rouge">BUILD.bazel</code> file in your project root containing:</p>

 <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">package</span><span class="p">(</span><span class="n">default_visibility</span> <span class="o">=</span> <span class="p">[</span><span class="s">"//visibility:public"</span><span class="p">])</span>

 <span class="n">filegroup</span><span class="p">(</span>
     <span class="n">name</span> <span class="o">=</span> <span class="s">"node_modules"</span><span class="p">,</span>
     <span class="n">srcs</span> <span class="o">=</span> <span class="n">glob</span><span class="p">(</span>
         <span class="n">include</span> <span class="o">=</span> <span class="p">[</span><span class="s">"node_modules/**/*"</span><span class="p">],</span>
         <span class="n">exclude</span> <span class="o">=</span> <span class="p">[</span>
           <span class="c1"># Files under test &amp; docs may contain file names that
 </span>          <span class="c1"># are not legal Bazel labels (e.g.,
 </span>          <span class="c1"># node_modules/ecstatic/test/public/中文/檔案.html)
 </span>          <span class="s">"node_modules/test/**"</span><span class="p">,</span>
           <span class="s">"node_modules/docs/**"</span><span class="p">,</span>
           <span class="c1"># Files with spaces are not allowed in Bazel runfiles
 </span>          <span class="c1"># See https://github.com/bazelbuild/bazel/issues/4327
 </span>          <span class="s">"node_modules/**/* */**"</span><span class="p">,</span>
           <span class="s">"node_modules/**/* *"</span><span class="p">,</span>
         <span class="p">],</span>
     <span class="p">),</span>
 <span class="p">)</span>
 </code></pre></div></div>

 <p>The example in <code class="language-plaintext highlighter-rouge">examples/user_managed_deps</code> uses self-managed dependencies.</p>

 <p>To use the Yarn package manager, which we recommend for its built-in
 verification command, you can run:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>bazel run @nodejs//:yarn_node_repositories
 </code></pre></div></div>

 <p>If you use npm instead, run:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>bazel run @nodejs//:npm_node_repositories <span class="nb">install</span>
 </code></pre></div></div>

 <p>The <code class="language-plaintext highlighter-rouge">@nodejs//:yarn_node_repositories</code> and <code class="language-plaintext highlighter-rouge">@nodejs//:npm_node_repositories</code> targets will run yarn/npm on all of the
 package.json contexts listed <code class="language-plaintext highlighter-rouge">package_json</code> attribute of the <code class="language-plaintext highlighter-rouge">node_repositories</code>
 repository rule in your WORKSPACE file (<code class="language-plaintext highlighter-rouge">node_repositories(package_json = [...])</code>).</p>

 <p>If there are multiple package.json contexts in this rule but you would like to
 run the bazel managed yarn or npm on a single context this can be done
 using the following targets:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>bazel run @nodejs//:yarn <span class="nt">--</span> &lt;arguments passed to yarn&gt;
 </code></pre></div></div>

 <p>If you use npm instead, run:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>bazel run @nodejs//:npm <span class="nt">--</span> &lt;arguments passed to npm&gt;
 </code></pre></div></div>

 <p>This will run yarn/npm in the current working directory. To add a package with the <code class="language-plaintext highlighter-rouge">yarn add</code> command,
 for example, you would use:</p>

 <div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>bazel run @nodejs//:yarn <span class="nt">--</span> add &lt;package&gt;
 </code></pre></div></div>

 <p>Note: the arguments passed to <code class="language-plaintext highlighter-rouge">bazel run</code> after <code class="language-plaintext highlighter-rouge">--</code> are forwarded to the executable being run.</p>


       </div>
     </div>

     <div class="col-md-2 sticky-sidebar">
       <div class="right-sidebar">
         <ul class="gh-links">
           <li>
             <i class="fa fa-github"></i>
             <a href="https://github.com/bazelbuild/rules_nodejs/issues/new?title=Documentation issue: Dependencies&labels=question/docs">Create
               issue</a>
           </li>

           <li>
             <i class="fa fa-pencil"></i>
             <a class="gh-edit" href="https://github.com/bazelbuild/rules_nodejs/tree/stable/docs/dependencies.md">Edit
               this page</a>
           </li>

         </ul>
         <ul class="section-nav">
 <li class="toc-entry toc-h2"><a href="#bazel-managed-vs-self-managed-dependencies">Bazel-managed vs self-managed dependencies</a></li>
 <li class="toc-entry toc-h2"><a href="#using-bazel-managed-dependencies">Using Bazel-managed dependencies</a>
 <ul>
 <li class="toc-entry toc-h3"><a href="#yarn_install-vs-npm_install">yarn_install vs. npm_install</a></li>
 <li class="toc-entry toc-h3"><a href="#fine-grained-npm-package-dependencies">Fine-grained npm package dependencies</a></li>
 <li class="toc-entry toc-h3"><a href="#multiple-sets-of-npm-dependencies">Multiple sets of npm dependencies</a></li>
 <li class="toc-entry toc-h3"><a href="#fine-grained-npm-package-nodejs_binary-targets">Fine-grained npm package nodejs_binary targets</a></li>
 <li class="toc-entry toc-h3"><a href="#coarse-node_modules-dependencies">Coarse node_modules dependencies</a></li>
 </ul>
 </li>
 <li class="toc-entry toc-h2"><a href="#using-self-managed-dependencies">Using self-managed dependencies</a></li>
 </ul>
       </div>
     </div>
   </div>
 </div>

 <footer class="footer">
   <div class="container">
   <div class="row">
     <div class="col-lg-8">
       <p class="text-muted">&copy; 2020 The rules_nodejs authors</p>
     </div>
   </div>
 </div>

 </footer>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script crossorigin="anonymous"
         integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
         src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <!-- Anchor JS -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.0/anchor.min.js" type="text/javascript"></script>
 <script>
   // Automatically add anchors and links to all header elements that don't already have them.
   anchors.options = { placement: 'left' };
   anchors.add();
 </script>

 <script>
   var shiftWindow = function () {
     if (location.hash.length !== 0) {
       window.scrollBy(0, -50);
     }
   };
   window.addEventListener("hashchange", shiftWindow);

   var highlightCurrentSidebarNav = function () {
     var href = location.pathname;
     var item = $('#sidebar-nav [href$="' + href + '"]');
     if (item) {
       var li = item.parent();
       li.addClass("active");

       if (li.parent() && li.parent().is("ul")) {
         do {
           var ul = li.parent();
           if (ul.hasClass("collapse")) {
             ul.collapse("show");
           }
           li = ul.parent();
         } while (li && li.is("li"));
       }
     }
   };

   $(document).ready(function () {
     // Scroll to anchor of location hash, adjusted for fixed navbar.
     window.setTimeout(function () {
       shiftWindow();
     }, 1);

     // Flip the caret when submenu toggles are clicked.
     $(".sidebar-submenu").on("show.bs.collapse", function () {
       var toggle = $('[href$="#' + $(this).attr('id') + '"]');
       if (toggle) {
         toggle.addClass("dropup");
       }
     });
     $(".sidebar-submenu").on("hide.bs.collapse", function () {
       var toggle = $('[href$="#' + $(this).attr('id') + '"]');
       if (toggle) {
         toggle.removeClass("dropup");
       }
     });

     // Highlight the current page on the sidebar nav.
     highlightCurrentSidebarNav();
   });
 </script>

 </body>
 </html>