间接引用远程JavaScript URL

 

我们希望在Rollup中使用Angular 4 / Typescript和NPM我们公司内部有以下要求：

  • 某些团队创建需要集中的JS库（如CDN）
  • 这些库位于远程URL的后面，不应该存在于本地应用程序中（原因是这些库更改太频繁）
  • 图书馆（应用程序）的使用者安装一个npm包以使用该图书馆
  • 本地安装的npm软件包包含一个Javascript外观文件或捆绑包，它将远程链接放置在存在于远程URL后面的JS库中
  • npm包还包含一个Typescript定义文件
  • 目标是消费者不需要添加带有URL的脚本标签（他不应该意识到这一点）
  • 本地安装的Javascript文件可以与应用程序代码捆绑在一起
  • 如果可能，库的新版本将向后兼容

    • 使用Typescript / Javascript / NPM / Rollup实现这一目标的最佳方法是什么？ 我们将使用ES2015语法转换为commonJS语法。

    我不认为汇总有类似于webpack dll插件的东西，所以，我的答案可能看起来不相关，但我认为你可以认为它是一个很好的起点，并开始寻找类似的汇总。

    一个住在CDN的图书馆 ：

  • 使用其相应的DLL Reference创建一个DLL ，该DLL Reference准确描述了如何要求导出的模块。
  • 使用自解释路径并保持一致，如https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts} ?<cacheBustingUID> https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts} （请求者应该添加?<cacheBustingUID>以避免客户端缓存问题）。 除了正常的版本控制之外，我还建议您在version字段中使用latest的关键字，以实现指向最新版本软件包的always true path ：（ https://cdn.mydomain.com/foo/1.0.0/foo.{js,json,d.ts}和https://cdn.mydomain.com/foo/latest/foo.{js,json,d.ts} ）。
  • 解析所有文件并启动开发服务器（注意，webpack允许作为配置返回一个承诺） 
    • 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`
    })
}

    解决方案太复杂。 创建这些JS库的团队应该在URL后面放置一个包。 团队应该在该捆绑包上启用该URL并启用电子标签缓存，以便用户始终拥有最新版本。 如果部署了新版本的捆绑包，则http / 1客户端必须自动重新下载该捆绑包。

    用户必须自己放置URL或使用json文件的机制可以设置信息驻留在json文件（如清单）中的位置。

    该应用程序的开发人员可以通过npm接收包含所有类型框架库的d.ts文件。 您不需要导入模块，因为它是一个远程URL。 所以你不需要导入任何东西，因为它可以保证由于脚本标记引用了库。

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

    上一篇: Indirectly reference remote Javascript URL

    下一篇: Tensorflow: simultaneous prediction on GPU and CPU