[译]使用 Riot，ES6 和 Webpack 构建应用

在读完 Muut 上 Frameworkless JavaScript 这篇博文后，我遇上了 Riot，请一定先阅读该博文！Muut 的程序员拿出实际行动编写了 Riot，一个 类似React 的用来构建响应式UI组件的微型库。

阅读Riot的文档时，令我感触最深的是 Riot 竟如此容易理解——相比 React 来说，在 Riot 里需要学习的术语和概念极少（说实话，和 Polymer 和 Angular 等比起来，Riot 也是十分简单易懂的）。

为了有助于学习 Riot，我把自己用 React 编写的 flux-backbone-todo 搬运到了用 Riot 编写的 Riot Todo app 上。这篇博文就是我记录这次重构经历的笔记的合集。

如果觉得文章太长，这里是精简版：

1. Riot 确实践行了它最小化的座右铭。Todo 应用的 Riot 版本（未压缩）只有很小的 32 KB。作为对比，React 版本则达到了 964 KB 之多（即使减去在 Riot 版本中未使用到的 Backbone 和 jQuery，React 版本仍然有 600 KB）。不管你怎么看，这都是一个巨大的差异。
2. Riot 有那种很少见的“刚刚好”的感觉，使用起来非常愉悦。
3. Riot 是一个相对较新的方案，因此我没有找到其在大一些的项目中的性能方面的统计数据。在大型项目中 Riot 表现究竟怎样尚未有定论，我希望它能够做的很好。

如果你对 Riot 还不熟悉，可以先去浏览一下 Riot官网——开发文档是第一课。我将列出一些我所学到的但是阅读文档时不一定很明显易懂的内容，而不会去讨论 Riot 是如何工作的。

在 Riot 中使用 ES6

示例的应用采用 ES6 编写，我使用 6to5 转译器将其转换为 ES5 代码，使用 Webpack 将编译后的代码以及需要的库一起打包。这种方式使得联结 JavaScript 模块成为必要——当你理解最新的 ES6 中 import 和 export 表述的优势时（看这个示例），你就会知道使用 ES6 编写代码是非常棒的。

Webpack通过配置可以使用 6to5 loader 将 ES6 源码自动转换成 CommonJS 格式的 ES5 模块，再将其打包至一个单独的 bundle.js 文件。

为什么我不使用 Riot 的 .tag 文件

Riot 标签文件是指包含 HTML 标记以及 JavaScript UI 逻辑的 HTML 模板。如果你已经浏览过了上面提到的 Todo应用，你可能会疑惑标签文件在哪里——答案是我已经不再使用它们，并且更喜欢用 JavaScript 来替代之。去除 .tag 文件简化了我的编码、加工和工作流程。对我来说，标签文件的复杂性和局限性大于它任何可以感知到的优点。

这并不是对 Riot 的一种批判。对标签文件来说，灵活的地方在于它完全可选而非强制使用，在此记录我不使用它的原因。

当你审视编译后的 JavaScript 代码时，你会看到 Riot 标签文件其实是一层轻微的语法糖.

• 它添加了额外的概念层——新的或者比较新的语法和语义需要学习。
• 它添加了额外的编译步骤。
• 标签文件编译器指定了你可以使用的语言和模板（CoffeeScript、ES6和Jade），这有悖于“使用你最喜欢的工具”的理念。
• 标签构造主体的逻辑脱离上下文：
  • 这使得标签文件无法被编辑器/IDE 的代码检测以及其他的工具处理
  • 涉及 this 时，脱离上下文意味着代码不是合法的 JavaScript 并且在编辑器/IDE 中会报错
• 目前没有对模块化（CommonJS，AMD）标签文件编译为普通 JavaScript 的支持。
• 标签文件需要构建工具（比如 Webpack 和 Browserify）直接使用标签转换器来进行转换。
• 类似 ES6 的构造方法很棒但它们不是合法的 JavaScript 并且很可能总是成为持续混乱（语法和语义上）的来源。你可以使用 ES6 的箭头函数以几乎相同的简洁程度来获得相同的语义（拥有词法作用域的 this），举例如下：

this.add = (e) => {
        	var input = e.target[0]
        	this.items.push(input.value)
        	input.value = ''
        }; 

这里有一个使用 ES6 模板字符串和箭头函数的 ES6 形式的 JavaScript 标签文件的例子。

ES6 模板字符串提高了标签 HTML 模板的可读性。相似的，如果你使用的是 CoffeeScript，那么你可以使用 CoffeeScript 块字符串。JSX 是另一种可选项——React 的 JSX 转换器可以经过修改然后生成字符串文本，这样你就可以获得现有的 JSX 工具的支持。

Riot和React的基本区别

最重要的区别在于 UI 标记模板是如何声明的：

• 在 React 中 UI 标记模板是在你的 JavaScript 源码中生成的（使用 JSX 语言的扩展）。
• Riot 则反转了 React 的模型，将标记和逻辑都放在 HTML（标签）文件中。

这种反转的结果是 React 模板 DSL（领域特定语言）就是 JavaScript，而 Riot 依赖自定义的模板 DSL（采用自定义标签实现）。下面是两个简化的从一个 todo 事项的数组中生成一个列表的例子，第一个采用 React JavaScript编写，第二个是等价的 Riot 标签标记形式：

<ul>
  todos.map(todo =>
    <li><TodoItemComponent todo={todo} /></li>)
</ul>

<ul>
  <li each="{todo in todos}">
    <todo-item todo="{todo}">
  </li>
</ul>

第一个例子中使用了 JavaScript 的 map 函数来生成一个 <li> 元素的列表；第二个例子则使用了 Riot 自定义的 each 模板属性。

Steve Luscher 在这个视频的结尾解释了为何他认为 JavaScript 比自定义模板 DSL 更优秀——你不仅需要学习一门自定义的 DSL，而且还要拘泥于这套 DSL 提供的特性的束缚。对于像上面这样较小的普通用例来说，两种方式其实没太多选择余地，但是在编写更大的高度动态化的 UI 组件时，React 的 JavaScript 方式的威力和灵活性就明显更优越了。

小贴士

避免自关闭的XHTML风格的标签

不要用/>来关闭标签，因为它不总是立刻就能关闭标签。当以 HTML5 元素对待时，<foo /> 表示<foo>（然而在 XHTML 中<foo />表示<foo></foo>），换言之，HTML5 会忽略/字符。有关这个话题可以在 Stackoverflow 上查看更多讨论。还可以查看下面两处内容：

• 使用/>关闭HTML5标签可能造成无法预料的结果
• 放错位置的表单结束标签

绑定标签事件处理器到 this 上

绑定标签事件处理器到 this 上，以确保这些处理器总是和标签文本一起清除（可选的方式是使用约定俗成的var self = this）。比如：

this.clear = function(e) {
  dispatcher.trigger(dispatcher.CLEAR_TODOS);
}.bind(this);

使用 ES6 中的词法作用域绑定的箭头函数也可以获得相同的效果：

this.clear = (e) => {
  dispatcher.trigger(dispatcher.CLEAR_TODOS);
};

关于循环项

使用each={item in items}结构将当前的循环项目传递给自定义的子标签。在下面的例子中，自定义的todo-item标签内的代码可以使用opts.todo来获取当前的 todo 项：

<ul>
 <li each="{todo in opts.store.todos}">
   <todo-item store="{parent.opts.store}" todo="{todo}">
 </li>
</ul>

命名空间事件名称

使用命名空间加冒号的约定来组织应用的事件名称，比如admin:edit，admin:delete，admin:new等。

可以在 CSS 文件中使用自定义标签

自定义标签最终会被渲染生成到 DOM 中，因此它们可以使用在 CSS 选择器和 DOM 审查中使用，这里是一个例子。

调试

当用 Webpack 打包时你需要使用开发工具 source-map 配置选项来为你打包后的应用生成 source map 文件。这使得你可以在 ES6 的源码文件中进行调试。

当需要浏览和调试源码时，打开浏览器的 Sources 窗口然后定位到webpack:///.文件夹：

• 在 Firefox 中：打开 Debugger（Ctrl+Shift+S）。
• 在 Google Chrome 中：打开 Console（Ctrl+Shift+J）然后点击 Sources 标签来查看源码面板。

我不是很喜欢调试程序和设置断点——大多数情况下我仅仅会有策略地在代码中放置暂时性的console.log()。

未来蓝图

Riot（类似 React）是一个 UI 库而不是一个框架。这非常棒（相对于大包大揽的框架来说，我更喜欢小而精的库的集合），但是对于具有一定复杂度的应用来说就需要条理清晰的高级的结构（一个体系结构）来提高可伸缩性、可发展性和可维护性。Flux 为类似React的应用增加了体系结构的选择。我喜欢 Flux，因为它很容易理解并且它能给人一种很直观的感觉（并非出于任何理论上的信仰）。Riot Todo app 使用了名为 RiotControl 的 Flux 风格的 dispatcher（经过轻微修改）来实现 Flux 体系结构。

{% blockquote srackham http://blog.srackham.com/posts/riot-es6-webpack-apps/ Building Apps with Riot, ES6 and Webpack %} 原文出处： {% endblockquote %}