浏览器内编译
1. 直观体验
自定义标签需要编译成 JavaScript 后才能在浏览器中运行。你可以在script标签中设置type="riot/tag"属性
<!-- 加载点 -->
<my-tag></my-tag>
<!-- 在当前页面中内置标签定义 -->
<script type="riot/tag">
<my-tag>
<h3>Tag layout</h3>
<inner-tag />
</my-tag>
</script>
<!-- <inner-tag/> 定义在外部文件中 -->
<script src="path/to/javascript/with-tags.js" type="riot/tag"></script>
<!-- 包含 riot.js 和编译器 -->
<script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
<!-- 正常加载 -->
<script>
riot.mount('*')
</script>
script 标签和外部文件可以包含多个标签定义，可以与普通 javascript 代码混合在一起。
Riot 会自动提取内置和外部标签定义，并在调用 riot.mount() 对标签进行渲染之前对其进行编译。
2. 访问标签实例
如果用 script src 加载标签而希望访问加载后的标签实例，你需要象下面这样将mount调用包在riot.compile中：
<script>
riot.compile(function() {
// 这种写法标签的编译和加载（mount）操作是同步的
var tags = riot.mount('*')
})
</script>
3. 编译器性能
编译过程基本上不花什么时间。在一个普通的应用中编译一个 timer标签 30次需要2毫秒。如果你的页面上有1000个不同的象timer这样大小的标签，编译也只需要35毫秒。
编译器的大小只有 3.2KB (gzip压缩后仅 1.7K) 所以在生产环境中进行客户端编译不会有下载和性能方面的问题.
编译方案 - 预编译
1. 编译方案
有两种编译方式
- 浏览器内编译 - 对调试不友好，不建议使用
- 预编译
我们只介绍一下 “预编译”。在服务器上预编译有以下好处:
- 可以使用你喜爱的 预处理器
- 小小的性能优势， 不需要在浏览器里加载和执行编译器。
- “单语言应用” 以及可以在服务端预渲染标签。
预编译使用 riot 命令, 用 NPM 全局安装:
npm install riot -g
如果使用了预编译，你的 HTML 就可以改成下面这样：
<!-- 加载点 -->
<my-tag></my-tag>
<!-- 包含 riot.js -->
<script src="https://cdn.jsdelivr.net/riot/2.3/riot.min.js"></script>
<!-- 包含预编译的自定义标签 (正常 javascript) -->
<script src="path/to/javascript/with-tags.js"></script>
<!-- mount 方法一样 -->
<script>
riot.mount('*')
</script>
2. 预编译的用法
riot 命令的用法:
# 编译到当前目录
riot some.tag
# 编译到目标目录
riot some.tag some_folder
# 编译到目标路径
riot some.tag some_folder/some.js
# 将源目录下的所有文件编译至目的目录
riot some/folder path/to/dist
# 将源目录下的所有文件编译（合并）到单个js文件
riot some/folder all-my-tags.js
每个源文件可以包含一个或多个自定义标签，也可以有标准JavaScript代码混在里面。编译器只会转换自定义标签，其它的内容不会动。
3. Watch模式
你可以 watch 目录，当文件有变化时自动编译
# 自动检测文件修改
riot -w src dist
4. 指定后缀名
对标签定义文件，你可以随意使用后缀名 (默认为 .tag):
riot --ext html
5. ES6配置文件
可以使用一个配置文件来保存和配置所有的 riot-cli 选项，以及创建自定义解析器
riot --config riot.config
riot.config.js文件样例：
export default {
from: 'tags/src',
to: 'tags/dist',
// 文件后缀名
ext: 'foo',
// html parser
template: 'foo',
// js parser
type: 'baz',
// css parser
style: 'bar',
parsers: {
html: {
foo: (html, opts, url) => require('foo').compile(html),
},
css: {
bar: (tagName, css, opts, url) => require('bar').compile(css),
},
js: {
baz: (js, opts, url) => require('baz').compile(js),
},
},
};
6. Node 模块
var riot = require('riot')
var js = riot.compile(source_string, options, url)
compile 函数接受string参数，返回string.
7. 融入你的工作流程
预处理器
这是预编译的最大优势. 你可以使用你喜欢的预处理器来创建自定义标签。HTML 和 JavaScript 处理器都可以自定义。
1. 使用方法
源语言使用命令行参数 --type 或 -t 来指定，也可以在<script>标签上指定type：
<my-tag>
<h3>My layout</h3>
<script type="coffee">
@hello = 'world'
</script>
</my-tag>
2. CoffeeScript
# 使用 coffeescript 预处理器
riot --type coffee --expr source.tag
--expr 参数表示所有的表达式也做预处理. 还可以使用 “cs” 作为 “coffee” 的别名. 以下是 CoffeeScript 自定义标签的例子:
<kids>
<h3 each={ kids[1 .. 2] }>{ name }</h3>
# Here are the kids
this.kids = [
{ name: "Max" }
{ name: "Ida" }
{ name: "Joe" }
]
</kids>
注意: each 属性也是用 CoffeeScript 写的. 你的机器上需要安装有 CoffeeScript:
npm install coffee-script -g
