Indirectly reference remote Javascript URL

 

We want to use Rollup with Angular 4/Typescript and NPM We have the following requirement within our company:

  • Certain teams create JS libraries which need to be centralized (like a CDN)
  • These libraries are behind a remote URL and should not exist locally within the application (the reason is that those libraries change too often)
  • The consumer of the library (application) installs a npm package to use the library
  • The locally installed npm package contains a Javascript facade file or bundle which puts a remote link to the JS library existing behind a remote URL
  • The npm package also contains a Typescript definition file
  • The goal is that the consumer doesn't need to add a script tag with an URL (he shouldn't be aware of this)
  • The locally installed Javascript file could be bundled together with the application code
  • New versions of the library would be backwards compatible if possible

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

    I don't think rollup has something similar to webpack dll plugin , so, my answer may appear unrelated but I think you could assume it as a good starting point and start looking for something similar in rollup.

    a library living in a CDN :

  • Create a DLL with its corresponding DLL Reference which exactly describes how to require the exported modules.
  • Use a self-explaining path and keep it consistent like https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts} (the requester should add ?<cacheBustingUID> to avoid client caching issues). In addition to the normal versioning, I also suggest you to use a keyword latest for the version field, this to achieve an always true path which points to the latest version of the bundle: ( 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} ).
  • Resolve all the files and start the dev server (mind that webpack allows to return a promise as a config) 
    • 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`
    })
}

    The solution is too complex. The teams who create those JS libraries should put a bundle behind a URL. Teams should put that URL and eTag caching should be enabled on those bundles so that users always have the latest version. If a new version of the bundle is deployed the http/1 clients automatically have to redownload the bundle.

    Users have to put the URL themselves or a mechanism with json files could be set up where the information resides in json files (like a manifest).

    The developers of the application could receive a d.ts file through npm containing all typings of the frameworking library. You won't need to import modules because it's a remote URL. So you don't need to import anything because it's guaranteed that the library is referenced because of a script tag.

    链接地址: http://www.djcxy.com/p/39598.html

    上一篇: React路由器v4角色基础授权

    下一篇: 间接引用远程JavaScript URL