項目地址 在此

項目由來

在使用了 wepy 和 mpvue 之后，發現這些開源項目在引入一些便捷的同時也引入了另一些問題，這些問題有的可以通過難看的 hack 去解決，有的就只能盼著源代碼修復，給我們造成了另外的負擔。

wepy：

• 組件數據共享（1.7.2 以后可以通過引入原生組件解決，但語法不同）
• 只能響應單層數據綁定
• repeat 不能為兩層子組件傳入 props
• 組件生命周期缺失

mpvue：

• 監聽頻繁觸發類事件會導致性能表現暴跌
• 串行渲染組件，導致渲染時間成倍增加
• 動態綁定初始值導致組件 bug
• 頁面數據緩存
• 全部頁面都在源碼層面設置了可分享（已在 pr 中）
• 圖片必須使用絕對路徑

這些問題收集于四五月份，有小概率可能會被解決。

已經因為這些運行時框架最終還是依賴于原生能力的，原生有的問題這寫框架一定會有，所以我們想能不能直接用單文件開發的形式去寫原生小程序？這也算是“漸進式”的開發了，于是就產生了這個工具，不做運行時的事，只做預處理，將問題最簡單化。

使用方法

# 第一步，安裝 mp-parser
npm install -g mp-parser

# 第二步，參考 example 文件夾自己新建目錄結構

# 第三步，在項目目錄下運行
mp-parser

執行 mp-parser --help 查看幫助。

配置文件

默認配置如下，如有需求可以通過修改項目下的 mpp.config.js 來進行覆蓋。

module.exports = {
  // 項目根路徑
  root: process.cwd(),

  // 源代碼目錄
  src: 'src',
  // 解析輸出目錄
  dist: 'dist',

  // 源代碼目錄中的入口 app 文件名
  app: 'app.vue',
  // 需要解析的文件夾
  needParseDirs: ['pages', 'components'],
  // 需要直接復制的文件夾
  needCopyDirs: ['images'],

  // 各標簽塊對應生成的擴展名
  exts: {
    template: 'wxml',
    style: 'wxss',
    script: 'js',
    config: 'json',
  },
};

功能特性

• 支持單文件化開發原生小程序，以 .vue 擴展名結尾
• 支持 sass/scss 編譯

示例：

<config>
{
  window: {
    navigationBarTitleText: 'mp-parser'
  }
}
</config>

<template>
  <view class="red"> {{ message }} </view>
</template>

<script>
Page({
  data: {
    message: 'Hello mp-parser!'
  }
})
</script>

<style lang="scss">
$red: red;

.red {
  color: $red;
}
</style>

特殊考慮

除了希望能利用單文件的開發方式來開發小程序，其他工具多多少少有些其他功能，例如自帶 js 轉碼壓縮、引入 npm 包之類的。

加入 js 轉碼壓縮主要是為了使用高級特性，例如 async，但我在 issue 中看到使用 async 函數會導致 ios 崩潰的問題，并且目前還不了解現在是否解決；而 es6 轉 es5 和代碼壓縮使用開發工具自帶的即可。

引入 npm 包可以說是比較需要的功能，但實際我們在開發中只使用到了一小部分包，并且一些庫使用了小程序不具備的環境變量，所以在引入前應該手動確認或修改；直接拷貝 npm 包可能會造成 dist 包過大，影響最終打包體積，使用 webpack 解決依賴又會引入額外的運行時代碼；我在初始化項目中已經引入了 mta 和 promise 墊片，滿足一般開發需求。如果有特殊需求，會在后續考慮更優雅的加入此功能。

其實本工具并不復雜，主要就是解決了很小的一點不便，讓我們更舒服的用原生而已，歡迎各位試用或 fork 改造，項目地址 在此。