javascript - HTML组件开发。具有浏览器自动重新加载功能的轻量级快速解决方案

Question

假设我想制作一个由 HTML 组件组成的新框架。 我的元素结构是这样的:

/components
../dialog
../../css
../../js
../../html
../textfield
../../css
../../js
../../html

我需要一些技术来运行这样的元素，这将给我:

• 即时浏览器重新加载/热代码推送
• less/sass 支持
• 像 Handlebars 这样的模板引擎，所以对于每个组件我不需要导入我所有的 css 并编写 html head 标签

所以基本上我需要类似 codepen.io 的东西但借助我的 IDE 的强大功能(我使用 webstorm)

我尝试过的:

• ExpressJs - 我不喜欢我应该为每个组件定义路由，而且仍然无法使用任何热推送包配置它:nodemon，node-supervisor - 他们重新加载应用程序，但不是 chrome 中的页面。
• Ember - 需要并生成大量 temp 代码，这导致我的 8gb ram 计算机运行缓慢，因为我的 IDE 试图索引所有 node_modules。我知道它可以配置，但也没有其他优势。
• Angular - 创建新组件文件后我还应该执行很多步骤 - 导入等等。
• Meteor - 迄今为止最好的解决方案之一，但它拥有完整的技术栈 - client & server。重新加载有点慢。我也知道exactly它不能与 Chrome Dev Tools Workspaces 一起使用，无法从控制台立即编辑 css 并保存到磁盘，这是我梦寐以求的功能。

为了避免混淆。因此我想为用户提供 css/less/sass 和 html/jade/... 它不应该像 web 组件:Polymer 或 React

Answer 1

试用 gulp用 BrowserSync 编译你的 sass。在编译方式、编译时间等方面提供大量定制。