Make an indirect mention of a distant JavaScript web address

Our company is looking to incorporate Rollup with Angular 4/Typescript and NPM, and we have a specific set of requirements:

  • Various teams develop JS libraries that need to be centralized, similar to a CDN
  • These libraries are hosted at remote URLs and should not be stored locally within the application due to frequent changes
  • The consumer (application) installs an npm package in order to utilize the library
  • The locally installed npm package includes a Javascript facade file or bundle that links to the remote JS library
  • The npm package also includes a Typescript definition file
  • The objective is for the consumer to seamlessly use the library without needing to add a script tag with a URL
  • The locally installed Javascript file can be bundled alongside the application code
  • New versions of the library should ideally maintain backwards compatibility

What is the most effective method to achieve this using Typescript/Javascript/NPM/Rollup? We intend to utilize ES2015 syntax transpiled to commonJS syntax.

typescriptnpmecmascript-6commonjsrollupjs

Answer №1

While Rollup may not have an equivalent to webpack's dll plugin, I suggest using the following approach as a starting point and exploring similar options in Rollup.

Utilizing a library hosted on a CDN:

  1. Generate a DLL along with its corresponding DLL Reference that outlines how to import the exported modules.
  2. Use a clear, consistent path such as 
    https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts}
    (include ?<cacheBustingUID> to prevent client caching issues). Additionally, consider using the keyword latest for the version parameter to always reference the latest bundle version: (
    https://cdn.mydomain.com/foo/1.0.0/foo.{js,json,d.ts}
    , and 
    https://cdn.mydomain.com/foo/latest/foo.{js,json, d.ts}
    ).
  3. Resolve all files and initiate the development server (note that Rollup allows returning a promise within the configuration).
module.exports = env => {
  const libs = ((name, version, exts) => (
    exts.map(ext => `https://cdn.mydomain.com/${name}/${version}/${name}.${ext}`)
  ))('foo', 'latest', ['js', 'd.ts', 'json'])

  return Promise
    .all(libs.map(fetch))
    .then([library, definitions, DLLReference] => {
      // Next steps?
      // Consider utilizing webpackDefinePlugin to inject dynamic paths
    })
}

Answer №2

The complexity of this solution is overwhelming. In order to streamline the process, it would be beneficial for the teams responsible for creating JavaScript libraries to host them behind a designated URL. By enabling eTag caching on these bundles, users can always access the most up-to-date version without any manual intervention. Additionally, implementing a mechanism using JSON files could provide a more seamless experience for users.

Furthermore, developers could simplify their workflow by receiving a d.ts file via npm that contains all necessary typings for the frameworking library. This eliminates the need to import modules directly and ensures that the library is referenced correctly through a script tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Errors in typing occurring due to preact children within framer-motion

While working on my preact widget (https://github.com/preactjs-templates/widget), I noticed a connection to ReactDOM. import { motion } from 'framer-motion'; import { h, VNode } from 'preact'; const Test = () => { return <mot ...

typescriptpreactframer-motion

Showing Information without NgFor Directives

I have successfully displayed data without using a ngFor loop. However, it is currently showing all the quote information from multiple customers. The CSS is arranged in such a way that the discount div is positioned next to the customerinfo div. Below is ...

htmlangulartypescript

Guide on Triggering a Custom Popup Message upon a Server Action in Next.js

Hey there, I'm currently facing some difficulties in finding the proper way to trigger a toast notification after successfully mutating data using server actions in Nextjs 13. The toast component I'm working with is specifically designed for clie ...

javascriptreactjsnext.jsecmascript-6next.js13

Tips for setting up npm dependencies in a subfolder

Within the main directory, I have a package.json file that contains this command: "install": "cd packages/my-package && yarn". Every time I execute yarn run install, my intention is for it to enter into the specified package, set up the node modul ...

javascriptnode.jsnpmyarnpkg

Begin app on startup for Raspberry Pi / Initiate app load on Raspberry Pi boot

My project is located in /home/pi/app and it starts with npm start I am trying to figure out how to get the app to automatically start up when the operating system boots up. I have tried using a service, but it doesn't seem to be working. [Unit] Desc ...

node.jsnpmraspberry-pielectron

Using babel to enhance a React component with a decorator

I've recently set up a basic startup app using create-react-app. However, I'm trying to minimize the number of modules being imported and loaded into my project without knowing their purpose. To achieve this, I decided to start with a nearly empt ...

reactjsnpmwebpackbabeljs

Ways to transfer a value to another component in React

Currently, I am working on a project where users can add, edit, or delete movies from a list. While the addition and deletion functionalities are working fine, I am facing challenges with the editing feature. In my Movie component, I have included a text i ...

javascriptnode.jsreactjswebecmascript-6

Tips for adjusting the search bar's position on a mobile device when it is activated by the user

I need help with an open source project where I am developing a search engine using Angular. When using smaller screen sizes, the search bar is positioned in the middle but gets hidden behind the keyboard terminal when clicked on. Can anyone advise on ho ...

javascriptcsshtmlangulartypescript

When using TypeORM's save() method with an array of objects, the @PrimaryColumn() annotations are ignored, resulting

My current situation involves an entity called Point: @Entity() export class Point { @PrimaryGeneratedColumn('uuid') id: string; @IsUUID() @PrimaryColumn({ type: 'uuid', ...

typescripttypeorm

Removing a directory from GitHub with the help of octokit/rest

I am attempting to utilize octokit/rest in order to programmatically remove a directory. Below is the code I am using: import {Octokit as Github} from '@octokit/rest'; const githubToken = "read from vault"; // Functions for retrieving current c ...

typescriptgithubgithub-apioctokit-js

Updating webdriver-manager can sometimes result in a "spawn Unknown system error -86" message. This error

(Angular). webdriver-manager 12.1.7 is causing issues specifically on Intel-based Macs. When running e2e tests, the error message "spawn Unknown system error -86" is encountered. The bug has been addressed in webdriver-manager 12.1.8, however, I am facing ...

angularselenium-webdrivernpmdependenciesprotractor

Error encountered when an Angular expression is changed after it has already been checked in a dynamically generated component

I am encountering a problem with Angular and the CdkPortal/CdkPortalHost from @angular/cdk. I developed a service that allows me to associate a CdkPortalHost with a specified name and set its Component at any given time. This is how the service is struc ...

angulartypescriptangular-material2angular5

Establish distinct node_modules folders for each individual git branch

After conducting several searches, I have not found a solution to my issue. I manage a git repository for my personal website, and I am facing a small problem when switching between branches. There are three branches related to different tools or framewor ...

node.jsgitgithubnpmyarnpkg

What is the process for importing a JSON file into a TypeScript script?

Currently, I am utilizing TypeScript in combination with RequireJS. In general, the AMD modules are being generated flawlessly. However, I have encountered a roadblock when it comes to loading JSON or any other type of text through RequireJS. define(["jso ...

requirejstypescript

Bespoke Socket.io NodeJS chamber

I am currently developing an application involving sockets where the requirement is to broadcast information only to individuals within a specific room. Below is a snippet of the code from my server.ts file: // Dependencies import express from 'expre ...

node.jstypescriptexpresssocket.io

What is the functionality of custom npm scripts in my codebase?

Currently, I am delving into node js code and came across an interesting piece of information in the package.json file. The script that caught my attention looks like this: scripts: { start : 'some-dependency start' } When I execute npm run ...

node.jsreactjsnpmcreate-react-appnpm-scripts

Error: Unable to execute candump command - candumpanalyzer not recognized

Operating System: Rasbian I have been attempting to utilize the instructions provided on https://www.npmjs.com/package/@canboat/canboatjsto in order to execute the following command: candump can0 | candumpanalyzer. Despite trying multiple variations of co ...

linuxnpmnpm-installcan-buscanutils

Utilize string values as identifiers in type declarations

My Props type declaration currently looks like this: type Props<FormData> = { formData: FormData, sectionNme: keyof FormData, name: string } However, I am trying to modify it to look more like the following: type Props<FormData> = ...

typescript

Setting up Vue.js for development

I am in the process of creating a client application with Vue.js, but I am currently grappling with a crucial question: How can I obtain the address of my backend service? There is one major requirement for the solution to this issue: The final build arti ...

vue.jsnpmbuildconfiguration

"Implementing a Filter for Selecting Multiple Options in Ionic Framework

I need help with filtering books in an online library project using a modal page. The modal has 3 input fields for title, author, and year. How can I filter the books based on these inputs? Here is a snippet of my modal.html code: <ion-content pa ...

arraysangulartypescriptsearchionic-framework