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

Question

假设我想制作一个包含 HTML 个组件的新框架。 我的项目结构是这样的：

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

我需要一些技术来 运行 这样的项目会给我：

• 即时浏览器reloads/hot代码推送
• less/sass支持
• 模板引擎像车把，所以对于每个组件，我不需要导入我所有的 css 并编写 html head 标签

所以基本上我需要像 codepen.io 一样工作的东西，但要借助我的 IDE（我使用 webstorm）

我尝试了什么：

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

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

Answer 1

您可以尝试 React 来自 Facebook。这是一个只生成视图的客户端框架。

• 与 webpack 和 webpack-dev-server 相结合，您可以将热代码推送到您的页面。
• 结合less-loader或sass-loader你可以获得LESS/SASS支持。
• 与 babel-loader 结合，您可以 运行 模板的 JSX，这是一个类似于 HTML 的标记。还允许您通过转译使用新的 ES6 功能。

Answer 2

尝试 gulp 使用 BrowserSync 编译您的 sass。在编译方式、编译时间等方面提供了大量自定义设置。