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 改造，项目地址 在此。