内置处理器

内置的处理器，有相关的依赖，如果用到了相应的处理器需要安装下面指定的依赖，比如 stylus 处理器，需要安装 stylus 依赖: npm i stylus --save-dev。

样式相关

  • less
    • 依赖：less
    • 默认扩展名：less
    • 处理器选项：参考官方 less
  • stylus
    • 依赖：stylus
    • 默认扩展名：styl
    • 处理器选项：参考官方 stylus
  • sass
    • 依赖：node-sass
    • 默认扩展名：sass、scss
    • 处理器选项：参考官方 sass
  • postcss：css 后处理器，postcss 提供的内置插件参考这里
    • 依赖：postcss
    • 默认扩展名：无
    • 处理器选项：参考官方 postcss

组件相关

  • component：用来编译单文件组件的处理器，属于核心的处理器，不需要安装任何附加依赖
    • 默认扩展名：依赖于构建配置的 component.extname 定义
  • view：用来编译单文件组件的模板部分，转成原生小程序支持的模板语法，属于核心的处理器，不需要安装任何附加依赖
    • 默认扩展名：tpl
  • componentGeneratorquickComponentGenerator(0.4.9变更): 0.4 版本开始支持 生成 SFC 处理器，相当于 component 处理器逆过程，快应用 核心处理器。

模板相关

  • pug: pug 模板语法支持，为了让使用该语法的模板能继续使用 okam 框架扩展的模板语法，需要增加如下配置
    • 默认扩展名：pug
      1. {
      2.   processors: {
      3.       pug: {
      4.           options: {
      5.               doctype: 'xml',
      6.               data: {
      7.                   name: 'efe-blue'
      8.               }
      9.           }
      10.       },
      11.       view: {
      12.           // 定义小程序模板转换的文件后缀名，加上这个才能确保能使用扩展的模板语法
      13.           // 默认情况下， pug 处理器的优先级高于 view
      14.           extnames: ['pug', 'tpl']
      15.       }
      16.   },
      17.   rules: []
      18. }

脚本相关

  • babel: babel6 转译处理器，组件编译默认需要依赖该处理器 或者 使用 babel7 也可以
    • 依赖：babel-core
    • 默认扩展名：无
    • 处理器选项：参考官方 babel
    • 对于 plugins 选项进行了扩展支持传入 function，可以根据文件自定义要返回的附加的 babel 插件：
      1. {
      2.   processors: {
      3.       babel: {
      4.           options: {
      5.               plugins(file) {
      6.                   if (file.path.indexOf('src/') === 0) {
      7.                       return [
      8.                           'external-helpers'
      9.                       ];
      10.                   }
      11.               }
      12.           }
      13.       }
      14.   }
      15. }
  • babel7
    • 依赖：@babel/core
    • 默认扩展名：无
    • 处理器选项：参考官方 babel
  • typescript

配置相关

  • componentJson: 组件配置处理器，属于内部核心处理器
  • configJson: 0.4 版本开始支持 能够撰写特定平台配置的核心处理器，具体可以参考特定平台配置
  • quickAppJson: 0.4 版本开始支持 快应用配置核心处理器

其它处理器

  • json5：将 json5 语法转成 json
    • 依赖：json5
    • 默认扩展名：json5

  • replacement：内容替换处理器

    • 依赖：无

    • 处理器选项: Object|Array 参考下面示例

      1. {
      2.   rules: [
      3.       match: '*.js',
      4.       processors: [
      5.           {
      6.               name: 'replacement',
      7.               options: {
      8.                   'http://online.com': 'http://test.com',
      9.                   'http://online.com': '${devServer}'
      10.               },
      11.               options: [
      12.                   // 可以是 function
      13.                   function (content) {
      14.                       return content;
      15.                   },
      17.                   {
      18.                       match: 'xx', // 支持正则或者字符串
      19.                       replace: 'xx'
      20.                   }
      21.               ]
      22.           }
      23.       ]
      24.   ]
      25. }

Postcss插件

  • env: 0.4 版本开始支持 撰写特定平台相关的样式代码的核心插件，具体可以参考这里，为了使用该插件，可以按如下方式引入该插件

    1.   {
    2.       processors: {
    3.           postcss: {
    4.               options: {
    5.                   plugins: ['env']
    6.               }
    7.           }
    8.       }
    9.   }

  • quickcss: 0.4.11 版本开始支持 引入该插件，会自动修复一些快应用不支持的写法，关于快应用样式支持可以参考这里

    • 背景样式 background 定义会自动展开，由于快应用不支持合并的写法：具体参考这里，比如 background: url(./img.png) no-repeat 会转成 background-image: url(./img.png); background-repeat: no-repeat;
    • 快应用颜色值不支持缩写：比如 background-color: #2dd 会转成 background-color: #22dddd，目前会对 background 及 border 相关样式的 color 进行处理；
    • border 样式：快应用不支持 none 写法会自动转成 0，此外快应用不支持 border-left/border-right/border-top/border-bottom 合并写法，会被自动展开，比如 border-left: 1px solid #ccc 会转成 border-left-width: 1px; border-left-style: solid; border-left-color: #cccccc;
    • font-weight: 快应用不支持 数字 写法，会自动转成 normal bold 取值，<600 会转成 normal，>=600 会转成 bold
    • display: 快应用只支持 flex，block 值会自动转成 flex
    • position: 快应用只支持 fixed，absolute 会自动转成 fixed

  • autoprefixer

    • 需要安装依赖：npm i autoprefixer --save-dev

  • px2rpx：自动将 px 单位转成 rpx

  1. {
  2.     rules: [
  3.         match: '*.css',
  4.         processors: {
  5.             postcss: {
  6.                 plugins: {
  7.                     autoprefixer: {
  8.                         browsers: [
  9.                             'last 3 versions',
  10.                             'iOS >= 8',
  11.                             'Android >= 4.1'
  12.                         ]
  13.                     },
  14.                     px2rpx: {
  15.                         // 设计稿尺寸
  16.                         designWidth: 1242,
  17.                         // 开启 1px 不转, 即有 1px 的数字不会进行转换
  18.                         // 开启 1px 不转, okam-build 0.4.6 版本开始支持
  19.                         noTrans1px: true,
  20.                         // 保留的小数点单位, 默认为 2
  21.                         precision: 2
  22.                     }
  23.                 }
  24.             }
  25.         }
  26.     ]
  27. }

如果使用的是 stylus 等预处理样式语言，可以按如下配置来配合 postcss 使用：

  1. {
  2.     processors: {
  3.         postcss: {
  4.             // 指定要处理的后缀，默认情况下 `stylus` 处理器执行优先级高于 `postcss`
  5.             extnames: ['styl', 'css'],
  6.             options: {
  7.                 // ...
  8.             }
  9.         }
  10.     },
  11.     rules: [
  12.         // ...
  13.     ]
  14. }