首页 > 其他分享 >vite vue使用pont-engine

vite vue使用pont-engine

时间:2023-04-18 12:23:51浏览次数:46  
标签:engine shell const api pont vue shelljs vite

pont-engine

是一款阿里的api生成工具

安装依赖即可

yarn add --dev pont-engine

然后即可使用

pont start

问题

但是因为默认生成的代码 包含cjs的模块语法,所以vite无法识别。
另外生成代码前最好把旧的生成目录删除!

解决办法

因此我做了如下优化,让您一键执行这些操作 并生成适应vite的代码:
在项目根目录下创建脚本命令 shell\gen-api.js

const shell = require('shelljs');
const child_process = require('node:child_process');

// 移除旧的services目录
shell.rm('-rf', 'src/services');
// 执行生成api目录(shell目前不支持exec需要交互式输入的运行命令,所以只能用原生 https://github.com/shelljs/shelljs/wiki/FAQ#running-interactive-programs-with-exec)
child_process.execSync('pont start',{stdio: 'inherit'});
// 替换生成文件里vite不支持的语法
const pontCorePath = './src/services/pontCore.js';
shell.sed('-i', 'Object.defineProperty.*', '', pontCorePath);
shell.sed('-i', 'exports.PontCore = void 0;', '', pontCorePath);
shell.sed('-i', 'exports.PontCore', 'export const PontCore', pontCorePath);

pa中添加一键打包命令

"scripts": {
  "pont": "node ./shell/gen-api.js",
   ...
},

注意 脚本依赖一个三方包 shelljs,记得安装一下

yarn add shelljs

使用

npm run pont

标签:engine,shell,const,api,pont,vue,shelljs,vite
From: https://www.cnblogs.com/dingshaohua/p/17329129.html

相关文章

  • ip 表单验证 vue iview
    ip表单验证vueiviewtemplate<Rowv-show="config.bindIP"><Colspan="12"><FormItemlabel="绑定IP:"prop="userPhoto":rules="[{required:t......
  • InfluxDB vs TDengine,用数据“说”性能
    为了验证 TDengine 3.0的性能,我们使用第三方基准性能测试平台TSBS(TimeSeriesBenchmarkSuite)中针对DevOps的cpu-only五个场景作为基础数据集,在相同的AWS云环境下对TDengine3.0和InfluxDB1.8(该版本是InfluxDB能够运行TSBS框架的最新版本) 进行了对比分析。在......
  • vue中使两个不同高度的div(内容长度不一)高度相同
    设置高度height,记得给左右侧div一个最小高度min-height,保证没有内容的时候有一定的高度,内容撑起来的时候再自动适应<el-col:xs="12":sm="6":md="2"class="grid-cell"><divclass="grid-contentbg-purple":style="{height:divH......
  • Vue性能优化
    (目录)Vue性能优化的必要性:Vue框架通过双向数据绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,其本身的性能已经非常强大了,但是在一个Vue项目中还是有一定的优化空间的,性能优化可以使整个网站的访问速度更快,运行更加流程,资源占用消耗更少,降低后续运营成本,所以Vu......
  • Vue3 回顾vue2的响应式原理
    视频vue2.x的响应式实现原理:对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。Object.defineProperty(data,'count',{get(){},set(){}})......
  • vue 课堂笔记
    1、----数组合并----说明:定义两个数组arr1和arr2,然后把这两个合并放入arr3中;constarr1=[1,2,3,4,5]    constarr2=[6,7,8,9] //合并数组   constarr3=[...arr1,...arr2]//转字符串以逗号分割   constarr4=arr3.join(',')   ......
  • Vue2
    Vue的指令:用在dom元素的属性上。​{{}}---差值表达式​v-text:文本显示​v-html:解析html文本​v-on:绑定事件@​v-bind:绑定dom中的属性:​v-show---v-if:隐藏和显示dom元素​v-model:设置和获取表单元素的值---双向绑定​......
  • vue往组件中传值,值在组件内如何实现修改
    Vuewarn]:Avoidmutatingapropdirectlysincethevaluewillbeoverwrittenwhenevertheparentcomponentre-renders.Instead,useadataorcomputedpropertybasedontheprop'svalue.Propbeingmutated:"type"这是Vue的一个警告提示,意思是应该避免直......
  • wangeditor5 vue2 安装后运行报错 Error in ./node_modules/@wangeditor/editor/d
    问题解决方法:原因就是引入的链接不对,使用cnpm、npm、pnpm、yarn安装插件的时候,路径都是不一样的,所以要对应着改路径就可以了链接:https://github.com/wangeditor-team/wangEditor/issues/4041......
  • vue中的插槽
    插槽用大白话讲就是:在子组件中用slot标签占个位置,然后在父组件中,子组件标签里嵌套一个标签,然后执行的时候用嵌套的标签替代slot子组件:组件MySon定义了一个默认插槽,用slot标签表示。当父组件使用MySon时,可以在其标签内放置任意内容,该内容将会替换掉slot标签。1<template>2......