深入wepy源码：wpy文件编译过程

本文摘要

来自摩拜前端团队 yingye

本文从源码入手分析了 wpy 文件的编译过程，在文末还介绍了如何编写wepy plugin。

欢迎关注本系列，留言并分享 小程序开发 中的体会。

wepy 是腾讯开源的一款小程序框架，主要通过预编译的手段，让开发者采用类 Vue 风格开发。 让我们一起看看， wepy 是如何实现预编译的。先放上一张官网的流程图，后面的分析可以参考该图。

wepy-cli 主要负责 .wpy 文件的编译，目录结构如下：

    

编译的入口是 src/compile.js 中的 compile() 方法，该方法主要是根据文件类型，执行不同的 compiler ，比如 .wpy 文件会执行 compile-wpy.js 下的 compile() 方法。

1. compile(opath) {

2.  ...

3.  switch(opath.ext) {  

4.    case ext:  

5.      cWpy.compile(opath);  

6.      break;  

7.    case '.less':  

8.      cStyle.compile('less', opath);  

9.      break;  

10.    case '.sass':  

11.      cStyle.compile('sass', opath);  

12.      break;  

13.    case '.scss':  

14.      cStyle.compile('scss', opath);  

15.      break;  

16.    case '.js':  

17.      cScript.compile('babel', null, 'js', opath);  

18.      break;  

19.    case '.ts':  

20.      cScript.compile('typescript', null, 'ts', opath);  

21.      break;  

22.    default:  

23.      util.output('拷贝', path.join(opath.dir, opath.base));

24.    ...

25.  }

26. }  

.wpy文件拆解

compile-wpy.js 下的 compile() 方法，核心调用了 resolveWpy() 方法。

resolveWpy() 方法，主要是将 .wpy 拆解成 rst 对象，并对其中的 template、script 做一些预处理，然后将 template、 script、 style 三部分移交给不同的 compiler 处理。

生成rst对象

通过 xmldom 获取 xml 对象，然后遍历节点，拆解为 rst对象。

1. import {DOMParser} from 'xmldom';

2. export default {

3.  createParser (opath) {

4.    return new DOMParser({

5.      ...

6.    })

7.  },

8.  ...

9.  resolveWpy () {

10.    let xml = this.createParser(opath).parseFromString(content);

11.  }

12. }

rst对象结构如下：

1. let rst = {

2.  moduleId: moduleId,

3.  style: [],

4.  template: {

5.    code: '',

6.    src: '',

7.    type: ''

8.  },

9.  script: {

10.    code: '',

11.    src: '',

12.    type: ''

13.  }

14. };

此外，还对 template 做了如下一些预处理：

• 获取文件中的 import ，放入 rst.template.components 中

• 获取 props 和 events ，放入 rst.script.code 中

compile-template

compile-template.js 中的 compile() 方法，根据 template 的 lang 值，执行不同的 compiler ，比如 wepy-compile-typescript 。编译完成后，执行 compileXML 方法，做了如下的操作：

• updateSlot 方法: 替换 slot 内容

• updateBind 方法: 在 {{}} 和 attr 上加入组件的前缀，例如： {{width}} -> {{$ComponentName$width}}

• 把自定义的标签、指令转换为 wxml 语法，例如：

1. for="xxx" index="idx" item="xxx" key="xxx">

3. wx:for="xxx" wx:for-index="xxx" wx:for-item="xxx" wx:key="xxxx">

compile-style

依旧先是根据 lang 值，先执行不同的 compiler ，比如 wepy-compile-less 。编译完成后，执行 src/style-compiler/scope.js 中的 scopedHandler() 方法，处理 scoped 。

1. import postcss from 'postcss';

2. import scopeId from './scope-id';

4. export default function scopedHandler (id, content) {

5.  console.log('id is: ', id)

6.  console.log('css content is: ', content)

7.  return postcss([scopeId(id)])

8.    .process(content)

9.    .then(function (result) {

10.      console.log('css result is: ', result.css)

11.      return result.css

12.    }).catch((e) => {

13.      return Promise.reject(e)

14.    })

15. }

这里主要是利用 add-id 的 postcss 插件，插件源码可参考 src/style-compiler/scope-id.js。根据上面的代码，打印出来的log如下：

   

最后，会把 requires 由绝对路径替换为相对路径，并在 wxss 中引入，最终生成的 wxss 文件为：

1. @import "./../components/demo.wxss";

3. Page{background:#F4F5F7} ...  

compile-script

依旧先是根据 lang 值，执行不同的 compiler。compiler 执行完之后，判断是否是 npm 包，如果不是，依据不同的 type 类型，加入 wepy 初始化的代码。

1. if (type !== 'npm') {

2.  if (type === 'page' || type === 'app') {

3.    code = code.replace(/exports\.default\s*=\s*(\w+);/ig, function (m, defaultExport) {

4.      if (defaultExport === 'undefined') {

5.        return '';

6.      }

7.      if (type === 'page') {

8.        let pagePath = path.join(path.relative(appPath.dir, opath.dir), opath.name).replace(/\\/ig, '/');

9.        return `\nPage(require('wepy').default.$createPage(${defaultExport} , '${pagePath}'));\n`;

10.      } else {

11.        appPath = opath;

12.        let appConfig = JSON.stringify(config.appConfig || {});

13.        let appCode = `\nApp(require('wepy').default.$createApp(${defaultExport}, ${appConfig}));\n`;

14.        if (config.cliLogs) {

15.          appCode += 'require(\'./_wepylogs.js\')\n';

16.        }

17.        return appCode;

18.      }

19.    });

20.  }

21. }

接下来会执行 resolveDeps() 方法，主要是处理 requires。根据 require 文件的类型，拷贝至对应的目录，再把 code 中的 require 代码替换为 相对路径。

处理好的 code 最终会写入 js 文件中，文件存储路径会判断类型是否为 npm。

1. let target;

2. if (type !== 'npm') {

3.  target = util.getDistPath(opath, 'js');

4. } else {

5.  code = this.npmHack(opath, code);

6.  target = path.join(npmPath, path.relative(opath.npm.modulePath, path.join(opath.dir, opath.base)));

7. }

plugin

根据上面的流程图，可以看出所有的文件生成之前都会经过 Plugin 处理。先来看一下，compiler 中是如何载入 Plugin 的。

1. let plg = new loader.PluginHelper(config.plugins, {

2.  type: 'css',

3.  code: allContent,

4.  file: target,

5.  output (p) {

6.    util.output(p.action, p.file);

7.  },

8.  done (rst) {

9.    util.output('写入', rst.file);

10.    util.writeFile(target, rst.code);

11.  }

12. });

其中，config.plugins 就是在 wepy.config.js 中定义的 plugins。让我们来看一下 PluginHelper 类是如何定义的。

1. class PluginHelper {

2.  constructor (plugins, op) {

3.    this.applyPlugin(0, op);

4.    return true;

5.  }

6.  applyPlugin (index, op) {

7.    let plg = loadedPlugins[index];

9.    if (!plg) {

10.      op.done && op.done(op);

11.    } else {

12.      op.next = () => {

13.        this.applyPlugin(index + 1, op);

14.      };

15.      op.catch = () => {

16.        op.error && op.error(op);

17.      };

18.      if (plg)

19.        plg.apply(op);

20.    }

21.  }

22. }

在有多个插件的时候，不断的调用 next()，最后执行 done()。

编写plugin

wxss 与 css 相比，拓展了尺寸单位，即引入了 rpx 单位。但是设计童鞋给到的设计稿单位一般为 px，那现在我们就一起来编写一个可以将 px 转换为 rpx 的 wepy plugin。

从 PluginHelper 类的定义可以看出，是调用了 plugin 中的 apply() 方法。另外，只有 .wxss 中的 rpx 才需要转换，所以会加一层判断，如果不是 wxss 文件，接着执行下一个 plugin。 rpx 转换为 px 的核心是，使用了 postcss-px2units plugin。下面就是设计好的 wepy-plugin-px2units，更多源码可参考 github 地址( https://github.com/yingye/wepy-plugin-px2units )。

1. import postcss from 'postcss';

2. import px2units from 'postcss-px2units';

4. export default class {

6.  constructor(c = {}) {

7.    const def = {

8.      filter: new RegExp('\.(wxss)$'),

9.      config: {}

10.    };

12.    this.setting = Object.assign({}, def, c);

13.  }

14.  apply (op) {

16.    let setting = this.setting;

18.    if (!setting.filter.test(op.file)) {

19.      op.next();

20.    } else {

21.      op.output && op.output({

22.        action: '变更',

23.        file: op.file

24.      });

26.      let prefixer = postcss([ px2units(this.setting.config) ]);

28.      prefixer.process(op.code, { from: op.file }).then((result) => {

29.        op.code = result.css;

30.        op.next();

31.      }).catch(e => {

32.        op.err = e;

33.        op.catch();

34.      });

35.    }

36.  }

37. }

最后

本文分析的源码以 [email protected] 版本为准，更多信息可参考 wepy github (即 github 1.7.x 分支，https://github.com/Tencent/wepy/tree/1.7.x )。另外，文中有任何表述不清或不当的地方，欢迎大家批评指正。

欢迎关注前段新视野

一个一天就破 *k 关注的日刊号

一个立志把质量当生命的日刊号

一个大佬们都在关注的日刊号

官方网站：https://taxi.mobike.com/weekly/index