在运行时打包客户端脚本，支持Common.js

Packaging client-side scripts at runtime with support for Common.js

本文关键字：支持 Common js 脚本 客户端 运行时      更新时间：2023-09-26

我正在用Node.js编写web服务器，我希望它(除其他事项外)向包含我的客户端SDK的客户端提供单个JavaScript文件。SDK基本上是一个对象，它提供了许多客户端可以使用的功能。

我需要从各种来源构建SDK:

    第三方库，如AngularJS
  • 自定义代码，存储在服务器上的静态.js文件中
  • 自定义代码，运行时在内存中动态创建

为了能够轻松地测试我的自定义代码(#2)，并且能够与服务器端共享这些代码，如果我能根据CommonJS编写代码就太好了。

我在为客户端打包东西方面没有太多经验，但我知道UglifyJS和Browserify。

如果它只是关于连接一些文件(也许是最小化它们)，我知道如何使用UglifyJS。如果只是交付一些与CommonJS兼容的东西，我也知道如何使用Browserify。我不明白的是它们的组合，以及需求#3——动态生成的代码。

这本质上意味着我不能使用Grunt来做这件事，但是所有的事情都需要在运行时完成(请不要讨论为什么我想这样做)。

所以…我有点迷路了。有人能帮我澄清一下吗?我怎样才能把所有这些部分组合在一起，从而最终得到一个可以发送给客户并且客户可以使用的可交付产品?

基本上，客户端最终应该得到的是一些全局对象，如$, angular和我自己的custom对象，但所有这些都只加载一个文件。

我怎么能这么做?

PS:我不需要将结果放在服务器上的磁盘上，如果它是一个纯粹的内存解决方案，这对我来说是非常好的(甚至是首选的，因为我不需要对文件系统进行写访问)。

Imho webpack提供了您需要的所有功能。它是一个类似browserify的捆绑器，但我发现它更加灵活和可扩展。webpack对不同的模块风格(CommonJS、AMD、ES6或老派的全局)是不可知的，并且能够在模块上应用和链接预处理器。这些被称为加载器(根据CommonJS规范)，可以用来动态生成代码。通常它们将LESS转换为CSS或CSS转换为JavaScript，但它们可以用于任何动态任务。

要提供全局$、angular和自定义对象，可以使用脚本加载器，它在全局上下文中经典地运行给定的模块。

你正在寻找的是所谓的"资产管道"

您可以使用mincer(我没有尝试过，但它看起来非常有前途)或资产管道(肯定会做这项工作，但有点不推荐)。

相关文章：