<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: janniks</title>
    <description>The latest articles on DEV Community by janniks (@janniks).</description>
    <link>https://dev.to/janniks</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F142292%2Fd0f827c0-88be-4fcc-8f50-4ccb07c7036e.jpg</url>
      <title>DEV Community: janniks</title>
      <link>https://dev.to/janniks</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/janniks"/>
    <language>en</language>
    <item>
      <title>A Better Way to Import Local Node.js Modules</title>
      <dc:creator>janniks</dc:creator>
      <pubDate>Wed, 22 Apr 2020 11:42:06 +0000</pubDate>
      <link>https://dev.to/janniks/a-better-way-to-import-local-node-js-modules-mi3</link>
      <guid>https://dev.to/janniks/a-better-way-to-import-local-node-js-modules-mi3</guid>
      <description>&lt;p&gt;This article is more or less an advertisement for an npm package that I have just released: &lt;a href="https://github.com/janniks/basetag"&gt;&lt;strong&gt;basetag&lt;/strong&gt;&lt;/a&gt;. I want to share how the package came to be and why I believe it’s pretty awesome.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Bit of Backstory
&lt;/h2&gt;

&lt;p&gt;Node.js projects — like all software development projects — can get somewhat complex over time: developers often refactor functionality into separate modules, subdirectories, and helper classes; in less stressful times &lt;a href="https://martinfowler.com/bliki/TechnicalDebt.html"&gt;tech debt&lt;/a&gt; can be paid off.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;As a system evolves, its complexity increases unless work is done to maintain or reduce it.&lt;br&gt;
— Lehman’s Laws of Software Evolution&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Also nowadays, the &lt;a href="https://en.wikipedia.org/wiki/Monorepo"&gt;monorepo&lt;/a&gt; has become increasingly popular again. This shows that projects and their structures can become very large in scope. Different programming languages have different approaches to working with this. Most modern programming languages use &lt;a href="https://en.wikipedia.org/wiki/Namespace"&gt;namespaces&lt;/a&gt; and modules/packages. Some example are listed below.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://twitter.com/clattner_llvm/status/474730716941385729"&gt;Swift has modules and implicit namespaces&lt;/a&gt; (e.g. &lt;code&gt;import Foundation&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://docs.python.org/3/tutorial/modules.html"&gt;Python has modules&lt;/a&gt; (e.g. &lt;code&gt;import pandas as pd&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://en.wikipedia.org/wiki/Java_package"&gt;Java has packages&lt;/a&gt; (e.g. &lt;code&gt;import java.util.Date&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://ruby-doc.com/docs/ProgrammingRuby/html/tut_modules.html"&gt;Ruby&lt;/a&gt;, &lt;a href="https://doc.rust-lang.org/book/ch07-00-managing-growing-projects-with-packages-crates-and-modules.html"&gt;Rust&lt;/a&gt;, &lt;a href="https://docs.microsoft.com/en-us/cpp/cpp/modules-cpp?view=vs-2019"&gt;C++&lt;/a&gt;, and many more have similar concepts somewhere. Heck, Linux itself has a &lt;a href="http://man7.org/linux/man-pages/man7/namespaces.7.html"&gt;namespaces(7)&lt;/a&gt; API!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Yet, in Node.js we can only import local modules via &lt;em&gt;relative path&lt;/em&gt;…&lt;/p&gt;

&lt;h2&gt;
  
  
  Node.js Imports
&lt;/h2&gt;

&lt;p&gt;If you’ve used Node.js, you know this and have seen many statements like the following one.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myModule&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./MyModule&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now that doesn’t seem too bad… But let’s consider a more complex project. Most of the time we will be importing modules that aren’t far away. Yet, it can happen that we have modules that are loosely coupled and far away (in terms of files). Please consider the following directory structure (although it might be a fabricated example and maybe even indicate some code smells).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;example/
├── its/
│   ├── …
│   └── baseballs/
│       ├── …
│       └── all/
│           ├── …
│           └── the/
│               ├── …
│               └── way/
│                   ├── …
│                   └── down.js
├── somewhere/
│   ├── …
│   └── deep/
│       ├── …
│       └── and/
│           ├── …
│           └── random.js
├── …
└── index.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You get the picture — we have a bunch of directories with a bunch of files. Now say we want to &lt;code&gt;reference example/somewhere/deep/and/random.js&lt;/code&gt; from &lt;code&gt;example/its/baseballs/all/the/way/down.js&lt;/code&gt;. In other languages we could probably &lt;code&gt;import somewhere.deep.and.random as rand&lt;/code&gt;, but in Node.js this gets pretty messy and would look like the following import statement.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;randomRelative&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../../../../../somewhere/deep/and/random&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This has always frustrated me considerably and I started doing some research. It turns out that there are a lot of tweets and blog posts that complain about this problem. But there are also some projects that try to tackle the problem.&lt;/p&gt;

&lt;p&gt;One approach (the npm package &lt;a href="https://www.npmjs.com/package/app-root-path"&gt;&lt;code&gt;app-root-path&lt;/code&gt;&lt;/a&gt; tries to find the root path of a project and lets you import relative to that path. They even include a nifty &lt;code&gt;.require&lt;/code&gt; method that you can reuse. This is already pretty cool!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;projectRoot&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;app-root-path&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;random&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;projectRoot&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/somewhere/deep/and/random.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// OR using .require&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;requireLocal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;app-root-path&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;require&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;random&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;requireLocal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;somewhere/deep/and/random&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You could even store the &lt;code&gt;requireLocal&lt;/code&gt; method into your globals 😱 in your entry file and it would be available in all other executed files. The package is great but I wanted to find something that feels even more &lt;em&gt;native&lt;/em&gt;.&lt;/p&gt;




&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MrhvUNsJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/916q7qo4t2bq4zzowbx9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MrhvUNsJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/916q7qo4t2bq4zzowbx9.png" alt="Screenshot of basetag repository on GitHub"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I continued my search and came across some blog posts that proposed &lt;a href="https://arunmichaeldsouza.com/blog/aliasing-module-paths-in-node-js"&gt;symlinks&lt;/a&gt; to reference to the base path of a project.&lt;/p&gt;

&lt;p&gt;That’s how the idea for &lt;a href="https://github.com/janniks/basetag"&gt;&lt;strong&gt;basetag&lt;/strong&gt;&lt;/a&gt; was born.&lt;/p&gt;

&lt;p&gt;The basetag package consists only of a &lt;code&gt;postinstall&lt;/code&gt; script that adds a symlink &lt;code&gt;$&lt;/code&gt; inside &lt;code&gt;node_modules&lt;/code&gt;. That symlink points to the base path of your project. Node.js now basically thinks that there is a &lt;code&gt;$&lt;/code&gt; module installed and you can require submodules of &lt;code&gt;$&lt;/code&gt; (which in turn just point to your project files).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;randomRelative&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../../../../../somewhere/deep/and/random&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;// Using 'basetag' becomes...&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;randomBasetag&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;$/somewhere/deep/and/random&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;All you need to do is install basetag (e.g. via &lt;code&gt;npm i -S basetag&lt;/code&gt;) and you can start using the &lt;code&gt;$/…&lt;/code&gt; prefix in require statements.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The prefixed require is very readable, simple, and it’s pretty obvious what’s going on.&lt;/li&gt;
&lt;li&gt;The prefixed require is still mixable with traditional relative requires. Since Node.js is literally using the same files (just routing differently), the imports are cached correctly.&lt;/li&gt;
&lt;li&gt;The solution works with Node.js versions ≥ v4.x.&lt;/li&gt;
&lt;li&gt;The package is super simple and has zero dependencies.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Well, that was my path to creating the tiny package &lt;a href="https://github.com/janniks/basetag"&gt;&lt;strong&gt;basetag&lt;/strong&gt;&lt;/a&gt;. Feel free to check it out and use it in your projects. Be aware that this package is stable but still very young — make sure to have all your files safe in version-control before using it. Due to the simple nature of the project there will probably not be a lot of updates to be expected…&lt;/p&gt;

</description>
      <category>node</category>
      <category>npm</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
