Riot - 编译器

浏览器内编译

1. 直观体验

自定义标签需要编译成 JavaScript 后才能在浏览器中运行。你可以在script标签中设置type="riot/tag"属性

script 标签和外部文件可以包含多个标签定义，可以与普通 javascript 代码混合在一起。
Riot 会自动提取内置和外部标签定义，并在调用 riot.mount() 对标签进行渲染之前对其进行编译。

2. 访问标签实例

如果用 script src 加载标签而希望访问加载后的标签实例，你需要象下面这样将mount调用包在riot.compile中：

3. 编译器性能

编译过程基本上不花什么时间。在一个普通的应用中编译一个 timer标签 30次需要2毫秒。如果你的页面上有1000个不同的象timer这样大小的标签，编译也只需要35毫秒。

编译器的大小只有 3.2KB (gzip压缩后仅 1.7K) 所以在生产环境中进行客户端编译不会有下载和性能方面的问题.

编译方案 - 预编译

1. 编译方案

有两种编译方式

浏览器内编译 - 对调试不友好，不建议使用
预编译

我们只介绍一下 “预编译”。在服务器上预编译有以下好处:

可以使用你喜爱的预处理器
小小的性能优势，不需要在浏览器里加载和执行编译器。
“单语言应用” 以及可以在服务端预渲染标签。

预编译使用 riot 命令, 用 NPM 全局安装:

npm install riot -g

如果使用了预编译，你的 HTML 就可以改成下面这样：

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. 融入你的工作流程

Gulp
Grunt

预处理器

这是预编译的最大优势. 你可以使用你喜欢的预处理器来创建自定义标签。HTML 和 JavaScript 处理器都可以自定义。

1. 使用方法

源语言使用命令行参数 --type 或 -t 来指定，也可以在

2. CoffeeScript

# 使用 coffeescript 预处理器
riot --type coffee --expr source.tag

--expr 参数表示所有的表达式也做预处理. 还可以使用 “cs” 作为 “coffee” 的别名. 以下是 CoffeeScript 自定义标签的例子:



  { name }

  # Here are the kids
  this.kids = [
    { name: "Max" }
    { name: "Ida" }
    { name: "Joe" }
  ]

注意: each 属性也是用 CoffeeScript 写的. 你的机器上需要安装有 CoffeeScript:

npm install coffee-script -g