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

时间:2014-03-26 07:13:19

标签: javascript node.js uglifyjs browserify client-side-scripting

我正在Node.js中编写一个Web服务器,我希望它(除其他外)将单个JavaScript文件传递给包含我的客户端SDK的客户端。 SDK基本上是一个提供客户端可以使用的许多功能的对象。

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

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

为了能够轻松地测试我的自定义代码(#2),并且能够与服务器端共享此代码,如果我可以根据CommonJS编写它,那将会很棒。

我没有太多为客户端捆绑的经验,但我知道UglifyJS和Browserify。

如果它只是关于连接一些文件(并且可能缩小它们),我知道如何处理UglifyJS。如果它只是提供一些与CommonJS兼容的东西,我也知道如何处理Browserify。我不能得到的是他们的组合,此外还有需求#3 - 动态生成的代码。

这实际上意味着我无法使用Grunt,但是一切都需要在运行时完成(请不要讨论为什么我想这样做)。

所以...我有点失落。任何人都可以帮我澄清一下吗?我如何将所有这些部分放在一起,以便最终得到一个可以发送给客户端的单个可交付成果,并且客户端可以使用?

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

我怎么能这样做?

PS:我没有必要将结果放到服务器上的磁盘上,如果它是一个纯粹的内存解决方案对我来说非常好(甚至是首选的,就像那时我不需要对文件系统的写访问权。)

2 个答案:

答案 0 :(得分:1)

Imho webpack提供您需要的所有功能。它是像browserify这样的捆绑器,但我发现它更灵活,更具扩展性。 webpack与不同的模块样式(CommonJS,AMD,ES6或旧式全局变量)无关,并且能够在模块上应用和链接预处理器。这些被称为loaders(根据CommonJS规范),可用于动态生成代码。通常他们将LESS转换为CSS或CSS转换为JavaScript,但它们可以用于任何动态任务。

要提供全局$angular和您的自定义对象,您可以使用script-loader,它在全局上下文中经典地运行给定模块。

答案 1 :(得分:0)

您正在寻找的是“资产管道”。

您可以使用mincer(我没有尝试过,但看起来非常有希望)或asset-pipeline(当然会完成这项工作,但有点弃用)。