mp-parser：小程序原生單文件開發工具

項目地址 在此

項目由來

在使用了 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 改造，項目地址 在此。