widget-parser

项目介绍

pc端的*.vue生成uni-app用的vue组件(根据注释截取必要的代码, div转view, px转rpx)，node运行即可.

package.json

{
    ...
    "scripts":{
        "widget.parser": "node ./xxx/widget.parser.js"
    }
}

运行 npm run widget.parser

自定义vue里需要转为widget的数据

<template>
  <div class="test">
    <!---------- 组件 START ---------->
    <div class="preview">
      <div class="t">t/t.vue</div>
      <!---------- 组件 END ---------->
      <div class="content">widget排除掉的内容</div>
      <div class="content">widget排除掉的内容</div>
      <!---------- 组件 START ---------->
      <div class="other">二级内容</div>
    </div>
    <!---------- 组件 END ---------->
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
// ---------- 组件 START ----------
  computed: {},
// ---------- 组件 END ----------
  mounted() {
    console.log(123)
  },
// ---------- 组件 START ----------
  methods: {}
// ---------- 组件 END ----------
}
</script>


<style lang="scss" scoped>
// ---------- 组件 START ----------
.t {
  height: rpx(100);
  background: #FFF;
  // ---------- 组件 END ----------
  .title {
    width: rpx(750);
  }
  // ---------- 组件 START ----------
  .sub {
    width: rpx(375);
  }
}
// ---------- 组件 END ----------
.other {}
</style>

项目文件结构

文件结构需要符合easycom规范, 文件夹名和文件名必须相同, 只解析1层文件夹

src
└-- views
    └--a
        └--a.vue
    └--b
        └-- b.vue
    └-- c
        └-- c.vue

widget.parser.js, 注释就是配置说明.

const path = require("path")
const WidgetCompiler = require("widget-parser")
// 实例化
new WidgetParser({
  // 前缀(文件夹名&文件名)
  prefix: "cms-",
  // 默认'uni-app'(需要转div标签,需要转px), 'pc'模式不转换
  type: "uni-app",
  // 保存widget的路径
  output: path.resolve(__dirname, "./uni-app-use/"),
  // 需要监听并生成widget的文件夹
  viewPath: path.resolve(__dirname, "./uni-app/views/*/*.vue"),
  // 如果路由数据更新了,是否在控制台打印消息
  log: true,
  // 替换关键字
  replace: {
    // 把'abc'转为'123'
    "abc": "123"
  }
})