<!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/changing-rules.html" rel="canonical">

<link href="" rel="shortcut icon" type="image/png">

<title>rules_nodejs - Making changes to rules_nodejs</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">

<select onchange="location.href=this.value">

<option selected disabled hidden>Version: 3.x</option>

<option value="/rules_nodejs/changing-rules.html">3.x</option>

<option value="https://docs.aspect.dev/rules_nodejs/changing-rules.html">2.3</option>

</select>

<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/Concatjs.html">Concatjs</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/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>

<li><a href="/rules_nodejs/esbuild.html">esbuild</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="making-changes-to-rules_nodejs">Making changes to rules_nodejs</h1>

<p>One advantage of open-source software is that you can make your own changes that suit your needs.</p>

<p>The packages published to npm and GitHub differ from the sources in this repo. The packages have only runtime bazel dependencies, but the sources depend on development dependencies. For example, the <code class="language-plaintext highlighter-rouge">@bazel_skylib</code> library is a development-time transitive dependency, while an npm package would have that dependency statically linked in.</p>

<blockquote>

<p>This differs from much of the Bazel ecosystem, where you are expected to build the whole transitive toolchain from sources.</p>

</blockquote>

<p>If you have a small change, it’s easiest to just patch the distributed artifacts rather than build from source. However if you’re doing active development in rules_nodejs or have a policy of not depending on release artifacts, it’s possible to depend directly on sources. This is not yet documented; file an issue on our repo if you think you need this.</p>

<h2 id="patching-the-npm-packages">Patching the npm packages</h2>

<p>The pattern we use most commonly is to use <a href="https://www.npmjs.com/package/patch-package">patch-package</a>. To store your local changes to the npm packages follow the steps:</p>

<ol>

<li><code class="language-plaintext highlighter-rouge">npm i -D patch-package</code></li>

<li>Edit the target package in your <code class="language-plaintext highlighter-rouge">node_modules</code></li>

<li>Run <code class="language-plaintext highlighter-rouge">npx patch-package &lt;npm package&gt;</code>. This will store the patch in the <code class="language-plaintext highlighter-rouge">patches/</code> directory in the root of the workspace</li>

<li>Add <code class="language-plaintext highlighter-rouge">"postinstall": "patch-package"</code> to the <code class="language-plaintext highlighter-rouge">package.json</code> in your repo to apply the patches when building dependencies (aka at <code class="language-plaintext highlighter-rouge">npm install</code>)</li>

</ol>

<h2 id="patching-the-built-in-release">Patching the built-in release</h2>

<p>rules_nodejs has a distribution format which is a tgz published to GitHub, and this can make it tricky to make casual changes without forking the project and building your own release artifacts.</p>

<p>Bazel has a handy patching mechanism that lets you easily apply a local patch to the release artifact for built-in rules: <a href="https://docs.bazel.build/versions/master/repo/http.html#attributes">the <code class="language-plaintext highlighter-rouge">patches</code> attribute to <code class="language-plaintext highlighter-rouge">http_archive</code></a>.</p>

<p>First, make your changes in a clone of the rules_nodejs repo. Export a patch file simply using <code class="language-plaintext highlighter-rouge">git diff</code>:</p>

<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git diff <span class="o">&gt;</span> my.patch

</code></pre></div></div>

<p>Then copy the patch file somewhere in your repo and point to it from 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">http_archive</span><span class="p">(</span>

<span class="n">name</span> <span class="o">=</span> <span class="s">"build_bazel_rules_nodejs"</span><span class="p">,</span>

<span class="n">patch_args</span> <span class="o">=</span> <span class="p">[</span><span class="s">"-p1"</span><span class="p">],</span>

<span class="n">patches</span> <span class="o">=</span> <span class="p">[</span><span class="s">"//path/to/my.patch"</span><span class="p">],</span>

<span class="n">sha256</span> <span class="o">=</span> <span class="s">"6d4edbf28ff6720aedf5f97f9b9a7679401bf7fca9d14a0fff80f644a99992b4"</span><span class="p">,</span>

<span class="n">urls</span> <span class="o">=</span> <span class="p">[</span><span class="s">"https://github.com/bazelbuild/rules_nodejs/releases/download/0.32.2/rules_nodejs-0.32.2.tar.gz"</span><span class="p">],</span>

<span class="p">)</span>

</code></pre></div></div>

</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: Making changes to rules_nodejs&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/changing-rules.md">Edit

this page</a>

</li>

</ul>

<ul id="toc" class="section-nav">

<li class="toc-entry toc-h2"><a href="#patching-the-npm-packages">Patching the npm packages</a></li>

<li class="toc-entry toc-h2"><a href="#patching-the-built-in-release">Patching the built-in release</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; 2021 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>