Indirectly referencing remote Javascript URL

Question

We want to use Rollup with Angular 4 / Typescript and NPM. Our company has the following requirement:

• Some teams create JS libraries that need to be centralized (like CDNs).
• These libraries are located behind the remote URL and should not exist locally in the application (the reason is that these libraries change too often)
• Library (application) consumer installs npm package to use library
• The locally installed npm package contains a facade file or Javascript package that places the remote link in the JS library that exists behind the remote URL.
• The npm package also contains a Typescript definition file
• The goal is that the consumer does not need to add a script tag with a URL (he should not know about it)
• A locally installed Javascript file can be linked with application code
• New versions of the library will be compatible with backward compatibility, if possible.

What is the best way to achieve this with Typescript / Javascript / NPM / Rollup? We would use ES2015 syntax converted to commonJS syntax.

Answer 1

I don’t think rollup has something similar to the webpack dll plugin , so my answer may appear, but I think you could consider this a good starting point and start looking for something like this in collapsing.

library living on CDN :

• Create a DLL with the appropriate DLL Reference , which describes exactly how to require exported modules.
• Use an explanatory path and save it as https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts} ?<cacheBustingUID> https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts} (should the requester add ?<cacheBustingUID> to avoid problems client caching). In addition to the regular versions, I also suggest that you use the latest keyword for the version field to reach the always true path , which points to the latest package 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} ).
• Allow all the files and start the dev server (remember that the web package allows you to return the promise as a 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] => { // what to do? // you can also inject the dynamic paths through `webpackDefinePlugin` }) } 

Answer 2

The decision is too complicated. The teams that create these JS libraries must place the node behind the URL. Teams must put this URL, and eTag caching must be enabled in these packages so that users always have the latest version. If a new version of the package is being deployed, http / 1 clients should automatically reload the package.

Users must place the URL or mechanism with json files themselves, where the information is in json files (for example, the manifest).

Application developers can get the d.ts file through npm, which contains all the typifications of the framework library. They will not need to import modules because it is a remote URL. This way, you do not need to import anything, because it ensures that the script tags reference the library.