文件解析器

Parser 是 anka-cli 的核心模块之一，用于解析不同类型的文件，使得 CLI 内的 Compilation 能正确的处理文件。

Anka-cli 内置了 postcss-parser、sass-parser、typescript-parser。所以对于这些类型的文件我们可以直接引入，不需要安装特定的解析器。如果有特殊需求，在项目根目录下添加对应的配置文件即可。

那么，不被识别的文件要如何处理呢？

编写 Parser

命名

每一个 npm 模块需要指定一个唯一的 name，对于 anka 的文件解析器，我们最好使用 anka-parser-[name] 这样的格式，便于他人识别。

如何处理文件

所有 Parser 模块其实都是 Function，接收 File、Compilation 实例，并在特定的时机调用 callback 函数以通知 Compilation : “我已经完工啦，你继续做其他的事儿吧”。这里我们尝试写一个解析器用于处理 sass 文件。

  1. import sass from 'node-sass'
  3. export default function (file, compilation, callback) {
  4.     const utils = this.getUtils()
  5.     const options = this.getOptions()
  6.     const config = this.getSystemConfig()
  8.     file.content = file.content instanceof Buffer ? file.content.toString() : file.content
  10.     sass.render({
  11.         file: file.sourceFile,
  12.         data: file.content,
  13.         outputStyle: !config.ankaConfig.devMode ? 'nested' : 'compressed'
  14.     }, (err, result) => {
  15.         if (err) {
  16.             utils.logger.error('Compile', err.message, err)
  17.         } else {
  18.             file.content = result.css
  19.             file.updateExt('.wxss')
  20.         }
  21.         callback()
  22.     })
  23. }

通过这段代码我们可以看见解析器函数在执行时 this 指向被重写，同时在获得 file 参数后，重写了 content 字段，并更新文件后缀为 .wxss。其中:

  • getUtils 获取我们可能需要的工具函数
  • getOptions 获取 anka.config.js 中指定的 options
  • getSystemConfig 获取 Compiler 的配置数据

需要注意的是，通过这两步后，Compilation 还不能能正确处理 sass/scss 文件。因此在使用时我们要更新项目中的 anka.config.js：

  1. + import sassParser from 'anka-parser-sass'
  3. module.exports = {
  4.     // ...
  5.     parsers: [
  6.         // ...
  7. +       {
  8. +           match: /.*\.(sass|scss)$/,
  9. +           parsers: [
  10. +               {
  11. +                   parser: sassParser,
  12. +                   options: {}
  13. +               }
  14. +           ]
  15. +       }
  16.     ]
  17. }

如此，我们就能顺利地处理 sass scss 后缀的文件啦。