深入wepy原始碼 wpy檔案編譯過程

wepy-cli 主要負責 .wpy 檔案的編譯，目錄結構如下：

編譯的入口是 src/compile.js 中的compile()方法，該方法主要是根據檔案型別，執行不同的 compiler ，比如 .wpy 檔案會走 compile-wpy.js 下的compile()方法。

compile(opath)  
}

compile-wpy.js 下的compile()方法，核心呼叫了resolvewpy()方法。

resolvewpy()方法，主要是將 .wpy 拆解成rst物件，並對其中的 template、script 做一些預處理，然後將 template、 script、 style 三部分移交給不同的 compiler 處理。

通過 xmldom 獲取xml物件，然後遍歷節點，拆解為rst物件。

import  from 'xmldom';
export default )
},...
resolvewpy () 
}

rst物件結構如下：

let rst = ,
script: 
};

compile-template.js 中的compile()方法，根據 template 的 lang 值，執行不同的 compiler ，比如 wepy-compile-typescript 。編譯完成後，執行 compilexml 方法，做了如下的操作：

依舊先是根據 lang 值，先執行不同的 compiler ，比如 wepy-compile-less 。編譯完成後，執行 src/style-compiler/scope.js 中的scopedhandler()方法，處理scoped。

import postcss from 'postcss';
import scopeid from './scope-id';
export default function scopedhandler (id, content) ).catch((e) => )
}

這裡主要是利用 add-id 的 postcss 外掛程式，外掛程式原始碼可參考 src/style-compiler/scope-id.js。根據上面的**，列印出來的log如下：

最後，會把requires由絕對路徑替換為相對路徑，並在 wxss 中引入，最終生成的 wxss 檔案為：

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

依舊先是根據 lang 值，執行不同的 compiler。compiler 執行完之後，判斷是否是 npm 包，如果不是，依據不同的 type 型別，加入 wepy 初始化的**。

if (type !== 'npm') 
if (type === 'page')  , '$'));\n`;
} else 
}});
}}

接下來會執行resolvedeps()方法，主要是處理requires。根據require檔案的型別，拷貝至對應的目錄，再把code中的require**替換為相對路徑。

處理好的code最終會寫入js檔案中，檔案儲存路徑會判斷型別是否為 npm。

let target;
if (type !== 'npm')  else

根據上面的流程圖，可以看出所有的檔案生成之前都會經過 plugin 處理。先來看一下，compiler 中是如何載入 plugin 的。

let plg = new loader.pluginhelper(config.plugins, ,
done (rst) 
});

其中，config.plugins 就是在 wepy.config.js 中定義的 plugins。讓我們來看一下pluginhelper類是如何定義的。

class pluginhelper 
let plg = loadedplugins[index];
if (!plg)  else ;
op.catch = () => ;
if (plg)}}}

在有多個外掛程式的時候，不斷的呼叫next()，最後執行done()。

wxss 與 css 相比，拓展了尺寸單位，即引入了rpx單位。但是設計童鞋給到的設計稿單位一般為px，那現在我們就一起來編寫乙個可以將px轉換為rpx的 wepy plugin。

import postcss from 'postcss';
import px2units from 'postcss-px2units';
export default class ) 
};this.setting = object.assign({}, def, c);
}    let setting = this.setting;
if (!setting.filter.test(op.file))  else );
let prefixer = postcss([ px2units(this.setting.config) ]);
prefixer.process(op.code, ).then((result) => ).catch(e => );}}}

歡迎各位關注我的blog，正文以issue形式呈現，喜歡請點star，訂閱請點watch～

深入wepy原始碼 wpy檔案編譯過程

深入wepy原始碼 wpy檔案編譯過程

mysql原始碼編譯表 MySQL原始碼編譯安裝

linphone iphone最新原始碼編譯

深入wepy原始碼 wpy檔案編譯過程

深入wepy原始碼 wpy檔案編譯過程

mysql原始碼編譯表 MySQL原始碼編譯安裝

linphone iphone最新原始碼編譯

相關推薦