[轉]如何用React寫小程式-2

神煩it狗發表於2018-06-20
React

由於上一篇文章比較突兀就進入轉換入口. 考慮了一下還是需要補全一些前置說明. 書接上回, 我們已經整理了小程式的前置知識. 這次先來補齊一些設計.

[轉]如何用React寫小程式-2

程式碼轉換可以使用 webpack, rollup等打包工具作為入口, 如webpack設定entry. 然後通過babel及自定義外掛進行編譯, 轉換成小程式程式碼.

轉成小程式程式碼後, 為何還考慮增加react-miniapp-core包. 有以下幾方面考慮.

  • 方便擴充套件
  • 生命週期Bridge

生命週期Bridge

我們知道一個 React元件 的包括從建構函式開始(getInitialState替代品), 到getDerivedStateFromProps, 到render等等一系列的生命週期鉤子. 這些生命週期函式將會在React渲染中的對應各個階段被呼叫.

但是在小程式中, 這一系列生命週期將會失效. 因為 在小程式中, 渲染各個週期的生命函式鉤子由小程式生命週期API指定, 在小程式中, React 生命週期鉤子無法直接使用, 但是我們又希望擁有原汁原味的React開發體驗. 這時就需要我們在runtime實現Page和Component的生命週期,並喚起React元件相應的生命週期鉤子. 由於我的工程未實現runtime部分功能. 以下為 taro 的生命週期bridge程式碼:

  const weappPageConf = {
    onLoad (options) {
      page._init(this)
      page.$router.params = options
      componentTrigger(page, 'componentWillMount')
    },
    onReady () {
      componentTrigger(page, 'componentDidMount')
    },
    onShow () {
      componentTrigger(page, 'componentDidShow')
    },
    onHide () {
      componentTrigger(page, 'componentDidHide')
    },
    onUnload () {
      componentTrigger(page, 'componentWillUnmount')
    },
    ...
  }
複製程式碼

下面我們來開始正題, 對babel外掛開發說明

Babel

使用es6開發的人都不會對這個庫陌生. 我們通常使用 Babel 時會建立.babelrc 進行以下配置

{
 "presets": [ ... ],
 "plugins": [ ... ],
}
複製程式碼

配置中包含presets和plugins. 其實presets也只是一堆外掛的集合. 那麼其實我們需要開發一款把React程式碼轉換為小程式程式碼的babel外掛.

那麼我們先來看看Babel有那些部分

Babel 編譯

Babel有很多很多的子庫, 其中最核心的就是 @babal/core.

但是其實涉及核心編譯生命週期主要是以下三步:

[轉]如何用React寫小程式-2

  • parse 是指把原始碼解析成AST.
  • traverse 通過對AST進行解析, 可對原AST進行相應轉換.
  • generate 把AST再次生成目標版本程式碼.

@babel/core 分別使用相應的子庫來實現這三個生命週期. 這裡不深入討論, 有興趣的可以去看babel的原始碼. babel主要外掛也分兩部分: parser plugin 和 traverse plugin. 而我們需要自行實現的plugin就是traverse plugin.

到這裡我們完成了鋪墊. 下次會繼續說明外掛的實現方式 如果時間足夠還可以討論實現思路.

專案程式碼: https://github.com/PepperYan/react-miniapp)

喜歡這篇文章的大佬, 點個贊和star, ٩(๑´0`๑)۶

該專案參考了mpvue, taro, weact等.

相關文章