silver.urih.com No paid content found

Lerna is a build system for managing and publishing multiple JavaScript or TypeScript packages from a single repository. It fits teams that keep several interdependent packages together and need coordinated versioning, publishing, and task running. If you only have one package, or your packages never share code or releases, Lerna adds overhead without much benefit.

The core problem Lerna solves

A monorepo puts many packages in one repository. That makes sharing code easy, but it creates coordination work:

• Which packages changed since the last release?
• What version should each changed package get?
• In what order should packages be published so dependencies exist first?
• How do you run a build or test across all packages without doing it manually?

Lerna addresses these by understanding the dependency graph between your packages and acting on it.

How Lerna manages a monorepo

Versioning

Lerna tracks which packages changed and updates their versions together or independently. It supports two common modes:

• Fixed mode: all packages share one version number and are released together.
• Independent mode: each package gets its own version, so you can release only what changed.

The choice matters. Fixed mode is simpler and suits tightly coupled packages. Independent mode gives finer control but requires more discipline.

Publishing

When you publish, Lerna determines the correct order based on inter-package dependencies, so a package that depends on another is published after its dependency. It can also create git tags and update changelogs as part of the release.

Running tasks across packages

Lerna can run a command (build, test, lint) across multiple packages, and it can scope that to only the packages affected by recent changes. This is the part that saves the most time in large repos, because you avoid rebuilding everything on every change.

Lerna and Nx

Lerna is now part of the Nx ecosystem. The relationship matters when you choose tooling:

• Lerna handles the monorepo versioning and publishing workflow.
• Nx provides the broader task running, caching, and project graph capabilities.

In practice, Lerna can use Nx under the hood for task execution and caching. If you already use Nx, Lerna fits as the release layer. If you only need publishing and versioning, Lerna can stand alone.

Lerna vs. plain npm/yarn workspaces

Workspaces solve dependency linking. Lerna solves the release and task-orchestration layer on top. Many projects use both: workspaces for installation, Lerna for versioning and publishing.

When Lerna is the right choice

Consider Lerna when:

• You maintain multiple packages that depend on each other.
• You need repeatable, ordered releases rather than manual npm publish per package.
• You want to run builds or tests only for packages affected by a change.
• You are already in or moving toward the Nx ecosystem.

Look elsewhere when:

• You have a single package.
• Your packages are released independently by different teams with no shared release process.
• You only need local linking and never publish.

Where to start

Begin with the Lerna documentation at lerna.js.org. The typical first steps are initializing Lerna in an existing repository, defining your package locations, and choosing fixed or independent versioning before your first release. Getting the versioning mode right early avoids a painful migration later.

JavaScript (JS) is the programming language that runs in the browser and makes a web page interactive. HTML gives a page its structure and CSS its appearance; JavaScript adds behavior — responding to clicks, updating content without a reload, validating forms, and fetching data. You add it to a page with a <script> tag (inline, internal, or external), and you can also run it outside the browser with Node.js. The sections below cover what JS does, how to include it, and the load-order and blocking pitfalls that trip people up.

What JavaScript actually does in a page

A browser turns HTML into a document object model (DOM) — a tree of elements. JavaScript can read and change that tree, listen for events, and make network requests. The main capabilities:

• DOM manipulation — read, create, change, or remove elements (document.querySelector, element.textContent, appendChild).
• Event handling — run code in response to user or browser events (click, submit, keydown, load).
• Networking — request data from a server without reloading the page, using fetch or XMLHttpRequest.
• Storage and state — keep data in the browser with localStorage or sessionStorage.
• Timing and animation — schedule work with setTimeout/setInterval and drive visual changes.

A minimal example: a button that changes text when clicked.

<button id="greet">Click me</button>
<p id="out"></p>

<script>
  document.getElementById("greet").addEventListener("click", () => {
    document.getElementById("out").textContent = "Hello from JavaScript";
  });
</script>

The input is the click; the action is the event listener; the expected result is the paragraph text changing.

Three ways to add JavaScript to a page

External files are the norm for real projects. The browser downloads the file once and can cache it, and you keep behavior separate from markup.

Where to put the script tag

Placement controls when the script runs relative to the HTML around it.

• In <head> without attributes — the browser stops parsing HTML to download and run the script. If the script touches elements that appear later in the document, they won't exist yet.
• defer — downloads in parallel and runs after the HTML is parsed, in order. This is the usual choice for scripts that need the full DOM.
• async — downloads in parallel and runs as soon as it's ready, which can be out of order. Use it for independent scripts that don't depend on each other or on the DOM.
• Before </body> — the classic approach: the DOM above is already parsed when the script runs.

<head>
  <script src="app.js" defer></script>
</head>

Running JavaScript outside the browser

JavaScript isn't limited to web pages. Node.js is a runtime that executes JS on a server or your machine, which is why the same language can power both the front end and the back end. Typical uses: build tools, command-line scripts, and server APIs.

To try it, install Node.js, then run a file:

node app.js

The input is a .js file; the action is invoking it with node; the expected result is whatever the script logs or does. Note that browser-only APIs like document and window don't exist in Node — code that touches the DOM won't run there.

Loading libraries from a CDN

Instead of bundling every library yourself, you can load popular open-source JavaScript and CSS libraries from a CDN. cdnjs is one such service: it describes itself as a free, open-source CDN for popular libraries, with JavaScript, CSS, and font resources cached globally on Cloudflare's network, and states it is trusted by 12.5% of all websites and serves 250 billion requests per month. A CDN serves the file from a location near the visitor, which can reduce latency compared with serving it from a single origin.

A typical pattern is to load the library first, then your own script that depends on it:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="app.js" defer></script>

Check the exact library path and version on the CDN's site rather than guessing, since paths and versions change. If you use defer on your own script but not on the library, ordering can still surprise you — keep dependent scripts in the order they must run.

Common pitfalls

• Blocking scripts — a plain <script> in the head pauses HTML parsing. Use defer or async, or place scripts at the end of the body.
• Load order — a script that uses a library before the library loads will throw. Load dependencies first, or use defer so order is preserved.
• DOM not ready — code that queries elements before they're parsed returns null. Use defer or wait for DOMContentLoaded.
• async ordering — async scripts run whenever they finish, so don't rely on their order.
• Scope — variables declared with var leak out of blocks; prefer let and const to keep behavior predictable.
• Errors stop execution — an uncaught error halts the rest of that script. Check the browser console first when something doesn't work.

How to verify it's working

Open the browser's developer tools (usually F12). The Console shows errors and any console.log output; the Network tab shows whether your script and any CDN files loaded and their status codes. If a click does nothing, check the console for an error, confirm the element's id matches, and confirm the script actually loaded before it ran.