javascript - 管理 Web 组件的依赖关系； JS、CSS/SASS 和模板文件

Question

我正在寻找布局我们新的网络组件的结构，目前我不确定我是否找到了一个工具来完成我们理想中想要的所有事情，或者非常接近，但看起来它会成为当今想做的相当普遍的事情。

我们有一个运行 Java 服务器端的 Web 应用程序，而客户端我们大量使用 JavaScript 并且 SASS ，除其他事项外。我们正在寻求重新构建我们的一些代码库，并对动态页面内容的某些方面进行组件化。

例如，我们希望有一个标准的表格组件，它可以完全独立于完整的网络应用程序进行开发。我看到表格组件具有以下 3 个核心文件:

• table.js
• table.scss(我们编译成 CSS 文件的 SASS 文件)
• table.tmpl(我们的模板文件最终编译成 JS 函数，例如使用 Handlebars 作为模板引擎)

然后帮助开发:

• table-test.html(带有一些虚拟数据的测试页)
• table-qunit.js(Qunit 测试)

然后所有这些文件都有望编译成以下内容:

• components.js - table.js 和 table.tmpl 编译和缩小，然后与所有其他组件拉入一些更大的 JS 文件
• components.css - table.scss 编译和压缩，并与所有其他组件 CSS 合并

我看过的工具:

• requireJS - 似乎非常针对 JS 依赖管理，对资源文件有一些想法，但找不到任何关于它的使用和 CSS 预处理器(如 SASS)的信息。我喜欢 AMD 的想法然而，JS 依赖管理很多。
• Grunt - 一个节点包，可以做一些我们想要的事情
• Sprockets - 类似于我们想要的东西的 Ruby 实现
• Javascript Maven plugin - 在语言/库方面最接近(我们已经使用 Java 和 Maven )，但同样，似乎只考虑 JavaScript 依赖管理而不是 CSS，或者至少是 SASS 资源文件。

有没有人有比以上更好的建议？有什么更接近我们正在寻找的东西吗？理想情况下，不需要 Node.js 或 Ruby 的东西会更好......

Answer 1

这听起来真的很适合 Component作者:TJ Holowaychuk。