Question

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

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

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

Answer 1

我不认为汇总有类似于webpack dll plugin的东西，所以，我的回答可能看似无关，但我认为你可以把它作为一个很好的起点，并开始在汇总中寻找类似的东西。

生活在CDN中的图书馆：

创建一个DLL及其对应的DLL Reference，其中详细描述了如何要求导出的模块。
使用自解释路径并使其保持一致https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts}（请求者应添加?<cacheBustingUID>以避免客户端缓存问题）。除了正常版本控制之外，我还建议您为latest字段使用关键字 version ，这样可以实现指向最新版本的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允许将promise作为配置返回）

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

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

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

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

间接引用远程Javascript URL

2 个答案: