乐趣区

关于javascript:使用vite插件进行低代码平台自定义开发手机版自定义范例

jiezi

前言

Youtube 上的前端网红「Theo」在 React 文档仓库发动了一个 Pull request，号召 React 文档不要再默认举荐 CRA(create react app)，而是应该将 Vite 作为构建利用的首选。
vite 的影响力曾经从 vue 蔓延到了 react，可见在前端工程化开发中，它曾经越来越风行，是时候该从 webpack 切换到 vite 了。

为什么应用 vite

Vite 采纳了基于 ES Module 的开发服务器。进行本地开发时，应用 HMR，速度快了很多。相较于 webpack，有很多劣势：

  1. 更快的热更新机制
  2. 更快的打包效率
  3. 更简略的配置

在做 kintone 开发时，我也很想尝试应用 vite 进行开发，构建。所以也查问了一些相干文章。
然而只看到了一些介绍如何应用 vite（rollup）打包 kintone 自定义 js 的文章。然而却没有看到如何利用 vite 进行 kintone 开发的文章。所以我想到开发一个 vite 插件来解决这个问题。

vite-plugin-kintone-dev

npm 链接：https://www.npmjs.com/package/vite-plugin-kintone-dev

这个插件实现的性能：

  1. 反对应用 vite 创立 kintone 自定义 js，hmr 让你的开发快如闪电
  2. 反对 react，vue 等不同的前端框架
  3. 构建时反对打包并主动上传 kintone

实际：kintone 手机版自定义

这次咱们联合 vite 插件，以 kintone 手机版的自定义开发为范例，给大家做演示。
技术栈：vite4 + vue3 + vant4

1. 应用 vite 脚手架初始化 vue 我的项目

首先通过 vite 脚手架工具。创立一个 vue 我的项目
npm create vue@latest

设置我的项目名：kintone-mobile-custom（这是我的预设）
抉择 vue，TypeScript。而后依据需要进行抉择。并进行初始化装置.
cd kintone-mobile-customnpm install

2. 装置 kintone 开发的 vite 插件

npm install -D vite-plugin-kintone-dev

第一次启动时，会主动查看你的 env 文件的设置模版。如果没有配置，会启动命令行交互，让你输出配置信息。同时自动更新你的 env 文件。
如果你的 env 文件设置有误，能够自行去批改。（serve 模式下为 ”.env.development” 文件, build 模式下为 ”.env.production” 文件）

插件的参数阐明

{  
  outputName: "mobile", // 最初打包的名字   
  upload: true
}

配置 vite

vite.config.ts

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import kintoneDev from "vite-plugin-kintone-dev";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    kintoneDev({
      outputName: "mobile",
      upload: true
    }),
  ],
});

3. 装置其余的一些库

图片库

接下来咱们再配置一个图片库。
十分罕用的一个插件图库插件 Unplugin Icons

npm install -D unplugin-icons unplugin-vue-components

它的具体设置，请参考它的官网。
增加所有 icon 资源，不必放心，真正打包时，它是按需加载的。
npm i -D @iconify/json

手机 ui 库

而后咱们应用 vant 这个库来做为手机开发的 ui 库。
https://vant-contrib.gitee.io/vant/#/zh-CN
npm install vant

tsconfig.app.json 配置

tsconfig.app.json

...
"compilerOptions": {"types": ["unplugin-icons/types/vue"],
  ...
}
...

vite 的最初配置

vite.config.ts

import {fileURLToPath, URL} from "node:url";
import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import Components from "unplugin-vue-components/vite";
import {FileSystemIconLoader} from "unplugin-icons/loaders";
import kintoneDev from "vite-plugin-kintone-dev";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [kintoneDev({ outputName: 'mobile', upload: true}),
    vue(),
    Components({resolvers: [IconsResolver()],
    }),
    Icons({
      compiler: "vue3",
      customCollections: {"my-icons": FileSystemIconLoader("./src/assets/icons"),
      },
    }),
  ],
  resolve: {
    alias: {"@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

代码的开发

1. 批改 main.ts

初始化 vue，并 将它的根节点挂载在手机的门户上方的空白局部的元素
src/main.ts

import 'vant/lib/index.css'
import './assets/main.css'
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import {Tabbar, TabbarItem} from 'vant'
kintone.events.on('mobile.portal.show', (event) => {const app = createApp(App)
  app.use(router)
  app.use(Tabbar)
  app.use(TabbarItem)
  app.mount(kintone.mobile.portal.getContentSpaceElement()!)
  return event
})

2. 暗藏掉原先的手机画面

src/assets/main.css

/* @import './base.css'; */
.gaia-mobile-v2-portal-announcement-container,
.gaia-mobile-v2-portal-appwidget-container,
.gaia-mobile-v2-portal-spacewidget-container {display: none;}
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {border-width: 0;}
.gaia-mobile-v2-viewpanel-header {background-color: #4b4b4b;}
.gaia-mobile-v2-viewpanel-contents {border-radius: 0;}
.van-tabbar {width: 100vw;}
.van-tabbar--fixed {left: unset;}
.gaia-mobile-v2-portal-header-container .gaia-mobile-v2-portal-header::after {background: none;}
.group-module-background {background-color: rgba(255, 255, 255);
border-radius: 10px;
box-shadow: 0 0 5px 0 #ced3d4;
}

3. 增加 tabbar

src/App.vue

<script setup>
import {ref} from "vue"
import type {Ref} from 'vue'
const active: Ref<number> = ref(0)
</script>
<template>
  <router-view v-slot="{Component}">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <van-tabbar route v-model="active" active-color="#febf00" inactive-color="#b8b8b5">
    <van-tabbar-item replace to="/">
      <span>Home</span>
      <template #icon="props">
        <i-mdi-home />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/contacts">
      <span>Contacts</span>
      <template #icon="props">
        <i-mdi-contacts />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/space">
      <span>Space</span>
      <template #icon="props">
        <i-mdi-shape-circle-plus />
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/star">
      <span>Star</span>
      <template #icon="props">
        <i-mdi-star />
      </template></van-tabbar-item>
    <van-tabbar-item replace to="/todo">
      <span>Todo</span>
      <template #icon="props">
        <i-mdi-tooltip-edit />
      </template></van-tabbar-item>
  </van-tabbar>
</template>
<style scoped>
.tabbar-icon {font-size: 1em;}
</style>

4. 模仿一个订单列表利用

咱们在 kintone 上创立一个利用。并筹备以下字段。

接着请自行添加一些数据。并且设置【API token】

5. 装置 kintone js sdk

npm install @kintone/rest-api-client

6. 增加 kintone 的 ts 申明

  1. 装置 kintone 的 ts 生成工具
    npm install -D @kintone/dts-gen
  2. 依据利用生成 ts 申明，请依据本人的环境输出

npx @kintone/dts-gen –base-url https://xxxx.cybozu.com -u xxxx -p xxxx –app-id xx

  1. tsconfig.app.json
{
...
"files": ["./node_modules/@kintone/dts-gen/kintone.d.ts"],
...
}
  1. 增加 restapi 返回数据的 ts 类型

types/restApiRecords.ts

import {KintoneRecordField} from '@kintone/rest-api-client'
export type GoodListAppRecord = {
  $id: KintoneRecordField.ID
  $revision: KintoneRecordField.Revision
  thumb: KintoneRecordField.SingleLineText
  num: KintoneRecordField.Number
  title: KintoneRecordField.SingleLineText
  price: KintoneRecordField.Number
  desc: KintoneRecordField.SingleLineText
  更新人: KintoneRecordField.Modifier
  创建人: KintoneRecordField.Creator
  更新工夫: KintoneRecordField.UpdatedTime
  记录编号: KintoneRecordField.RecordNumber
  创立工夫: KintoneRecordField.CreatedTime
}
  1. kintone sdk：@kintone/rest-api-client@4.1.0 的 ts 的 bug 应答

@kintone/rest-api-client 的 4.1.0 有 bug，在 vite 新版中，模块解析局部应用了 typescript5 中的新的配置 bundler。所以咱们把它改为 node 解析
node_modules/@vue/tsconfig/tsconfig.json

// modify "moduleResolution": "bundler" => "node"
"moduleResolution": "node"

接着还有 封装 api 申请 、env 文件增加一些 kintone 的配置、 创立页面 和设置路由，最终启动我的项目的步骤，不在这里展示，有趣味的请点击原文：应用 vite 插件进行 kintone 自定义开发

退出移动版