本文摘要
來自摩拜前端團隊 yingye
本文從原始碼入手分析了 wpy 檔案的編譯過程，在文末還介紹了如何編寫wepy plugin。
() 方法，該方法主要是根據檔案型別，執行不同的 compiler ，比如 .wpy 檔案會執行 compile-wpy.js 下的compile
()方法。
compile
(opath
)
}
() 方法，核心呼叫了resolvewpy
()方法。
() 方法，主要是將 .wpy 拆解成rst物件，並對其中的 template、script 做一些預處理，然後將 template、 script、 style 三部分移交給不同的 compiler 處理。
物件，然後遍歷節點，拆解為rst物件。
import
from
'xmldom'
;
export
default
)
},
...
resolvewpy
()
}
物件結構如下：
let rst
=,
script
:
};
() 方法，根據 template 的 lang 值，執行不同的 compiler ，比如 wepy-compile-typescript 。編譯完成後，執行 compilexml 方法，做了如下的操作：
for=
"***"
index
="idx"
item
="***"
key=
"***"
>
wx:for
="***"
wx:for-index
="***"
wx:for-item
="***"
wx:key
="***x"
>
() 方法，處理scoped。
import
postcss from
'postcss'
;
import
scopeid from
'./scope-id'
;
export
default
function
scopedhandler (id
,content)).
catch((e
)=>
)
}
由絕對路徑替換為相對路徑，並在 wxss 中引入，最終生成的 wxss 檔案為：
@import
"./../components/demo.wxss"
;
page
...
if
(type
!=='npm'
)
if(
type
==='page'),
'$'));
\n`;
}else);=
`\n(require
('wepy'
).default.(
$,$));
\n`;
if(config
.clilogs
)
return
;
}
});
}
}
() 方法，主要是處理requires。根據require檔案的型別，拷貝至對應的目錄，再把code中的require**替換為 相對路徑。
最終會寫入js檔案中，檔案儲存路徑會判斷型別是否為 npm。
let target
;
if
(type
!=='npm'
)else
let plg
=new
loader
.pluginhelper
(config
.plugins
,,
done
(rst
)
});
類是如何定義的。
class
pluginhelper
(index,op
)else
;op
.catch=()
=>
;
if(
plg)
plg.(
op);
}
}
}
()，最後執行done
()。
單位。但是設計童鞋給到的設計稿單位一般為px，那現在我們就一起來編寫乙個可以將px轉換為rpx的 wepy plugin。
() 方法。另外，只有 .wxss 中的rpx才需要轉換，所以會加一層判斷，如果不是 wxss 檔案，接著執行下乙個 plugin。rpx轉換為px的核心是，使用了 postcss-px2units plugin。下面就是設計好的 wepy-plugin-px2units，更多原始碼可參考 github 位址( )。
import
postcss from
'postcss'
;
import
px2units from
'postcss-px2units'
;
export
default
class
)
};
this
.setting
=object
.assign
({},
def,
c);
}(op
)else
);
let prefixer
=postcss
([px2units
(this
.setting
.config
)]);
prefixer
.process(op
.code,).
then
((result
)=>
).catch(e
=>
);
}
}
}
歡迎關注前段新視野
乙個一天就破 *k 關注的日刊號
乙個立志把質量當生命的日刊號
乙個大佬們都在關注的日刊號
官方**：
深入wepy原始碼 wpy檔案編譯過程
wepy cli 主要負責 wpy 檔案的編譯，目錄結構如下 編譯的入口是 src compile.js 中的compile 方法，該方法主要是根據檔案型別，執行不同的 compiler 比如 wpy 檔案會走 compile wpy.js 下的compile 方法。compile opath co...
mysql原始碼編譯表 MySQL原始碼編譯安裝
1 安裝cmake 2.8.10.2.tar.gz 以root使用者進入shell tar zxvf cmake 2.8.10.2.tar.gz cd cmake 2.8.10.2 configure make 無法make,檢測gcc編譯環境 make install 2 安裝ncurses 5....
linphone iphone最新原始碼編譯
編譯 之前，肯定是先clone最新 git clone recursive更新完後發現跟原來的編譯方式有了比較大的區別，更新完後編譯步驟更清晰，更方便.可以執行.prepare.py help 檢視幫助 開始配置前，請使用.prepare.py c清理上一次編譯結果 csrutil disable，...