☄️一个微信小程序页面组件转为Vue组件的库
$ npm install wxmini-to-vue$ yarn add wxmini-to-vueconst path = require('path')
// 导入 wxmini-to-vue
const WTV = require('wxmini-to-vue')
// 配置项
const options = {
// ... 参考 Options
}
// 实例化
const wtv = new WTV(options)
// 入口路径
const entryPath = path.resolve(__dirname, './path')
// 存放位置
const outputPath = path.resolve(__dirname, './o/path')
// 执行转换
wtv.transform(entryPath, outputPath)
// 执行完成后会在 [outputPath] 中存放注意：Options 暂时不做二级对象的合并只做替换，如果需要修改子对象请完整替换。
{
// 小程序css单位视图 如 12rpx 2倍图 后 转换成 6px
cssUnitScale: 2,
// 单位 如需 自适应 可改为 rem 但是后续大小可能需要额外处理
cssUnit: 'px',
// 排除的文件夹
exclude: ['node_modules', 'npm', '.git', '.vscode', 'dist']
// 元素映射
elementMap: {
text: 'span',
view: 'div',
image: 'img',
block: 'template'
},
// api 映射
wxApiMap: {
showToast: '$toast',
getStorageSync: '$store2',
setStorageSync: '$store2',
showLoading: '$toast.loading',
hideLoading: '$toast.clear',
navigateTo: '$router.push',
showModal: '$dialog',
request: '$http'
}
}wtv.transform(entryPath, outputPath)
// 入口路径
const entryPath = path.resolve(__dirname, './path')
// 存放位置
const outputPath = path.resolve(__dirname, './o/path')
// 执行转换
wtv.transform(entryPath, outputPath)babel code to ast
1. 将wxApi替换成 一些自定义的方式
例如：
wx.showToast => this.$toast
wx.getStorageSync => this.$store2
wx.setStorageSync => this.$store2
2. ..其他处理 暂不细说
使用 htmlparser2 将code 转换成 ast
1. 标签转换
2. 模版转换
使用 csstree 将code 转换成 ast
1. 标签转换
2. 单位转换