Webpack: 开发 PWA、Node、Electron 应用

概述

毋庸置疑，对前端开发者而言，当下正是一个日升月恒的美好时代！在久远的过去，Web 页面的开发技术链条非常原始而粗糙，那时候的 JavaScript 更多用来点缀 Web 页面交互而不是用来构建一个完整的应用。直到 2009年5月 Ryan Dahl 正式发布 NodeJS，JavaScript 终于有机会脱离 Web 浏览器独立运行，随之而来的是，基于 JavaScript 构建应用程序的能力被扩展到越来越多场景，我们得以用相同的语言、技术栈、工具独立开发桌面端、服务端、命令行、微前端、PWA 等应用形态。

相应地，我们需要更好的构建、模块化以及打包能力来应对不同形态的工程化需求，所幸 Webpack 提供的功能特性，能够充分支撑这些场景。

前面两个章节我们已经详细介绍了如何使用 Webpack 构建 NPM Library，以及如何基于 Module Federation 搭建微前端架构。本文将继续汇总这些特化场景需求，包括：

  • 如何使用 Webpack 构建 Progressive Web Apps 应用；
  • 如何使用 Webpack 构建 Node 应用；
  • 如何使用 Webpack 构建 Electron 应用。

构建 PWA 应用

PWA 全称 Progressive Web Apps (渐进式 Web 应用)，原始定义很复杂，可以简单理解为 一系列将网页如同独立 APP 般安装到本地的技术集合，借此，我们即可以保留普通网页轻量级、可链接(SEO 友好)、低门槛（只要有浏览器就能访问）等优秀特点，又同时具备独立 APP 离线运行、可安装等优势。

实现上，PWA 与普通 Web 应用的开发方法大致相同，都是用 CSS、JS、HTML 定义应用的样式、逻辑、结构，两者主要区别在于，PWA 需要用一些新技术实现离线与安装功能：

  • ServiceWorker： 可以理解为一种介于网页与服务器之间的本地代理，主要实现 PWA 应用的离线运行功能。例如 ServiceWorker 可以将页面静态资源缓存到本地，用户再次运行页面访问这些资源时，ServiceWorker 可拦截这些请求并直接返回缓存副本，即使此时用户处于离线状态也能正常使用页面；

请添加图片描述

  • manifest 文件：描述 PWA 应用信息的 JSON 格式文件，用于实现本地安装功能，通常包含应用名、图标、URL 等内容，例如：

    // manifest.json
{
  "icons": [
    {
      "src": "/icon_120x120.0ce9b3dd087d6df6e196cacebf79eccf.png",
      "sizes": "120x120",
      "type": "image/png"
    }
  ],
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "display": "standalone",
  "start_url": ".",
  "description": "My awesome Progressive Web App!"
}

我们可以选择自行开发、维护 ServiceWorker 及 manifest 文件 ，也可以简单点使用 Google 开源的 Workbox 套件自动生成 PWA 应用的壳，首先安装依赖：

yarn add -D workbox-webpack-plugin webpack-pwa-manifest

其中：

  • workbox-webpack-plugin：用于自动生成 ServiceWorker 代码的 Webpack 插件；
  • webpack-pwa-mainifest：根据 Webpack 编译结果，自动生成 PWA Manifest 文件的 Webpack 插件。

之后，在 webpack.config.js 配置文件中注册插件：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { GenerateSW } = require("workbox-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: "Progressive Web Application",
    }),
    // 自动生成 Manifest 文件
    new WebpackPwaManifest({
      name: "My Progressive Web App",
      short_name: "MyPWA",
      description: "My awesome Progressive Web App!",
      publicPath: "/",
      icons: [
        {
          // 桌面图标，注意这里只支持 PNG、JPG、BMP 格式
          src: path.resolve("src/assets/logo.png"),
          sizes: [150],
        },
      ],
    }),
    // 自动生成 ServiceWorker 文件
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
};

之后，执行编译命令如 npx webpack 就可以生成如下资源：

├─ 8-1_pwa
│  ├─ src
│  │  ├─ xxx
│  ├─ dist
│  │  ├─ icon_150x150.119e95d3213ab9106b0f95100015a20a.png
│  │  ├─ index.html
│  │  ├─ main.js
│  │  ├─ manifest.22f4938627a3613bde0a011750caf9f4.json
│  │  ├─ service-worker.js
│  │  ├─ workbox-2afe96ff.js
│  └─ webpack.config.js

接下来，运行并使用 Chrome 打开页面，打开开发者工具，切换到 Applicatios > Service Workers 面板，可以看到：

请添加图片描述

这表明 Service Worker 已经正常安装到浏览器上。此外，地址栏右方还会出现一个下载图标：

请添加图片描述

点击该图标可将应用下载到本地，并在桌面创建应用图标 —— 效果如同安装独立 App 一样。

提示：PWA 是一种复杂度较高的技术，前文只是介绍了一种 Webpack 构建 PWA 的简单方法，感兴趣的同学可以扩展阅读：

  • developer.chrome.com/docs/workbo…
  • developers.google.com/web/fundame…

构建 Node 应用

注意，在开发 Node 程序时使用 Webpack 的必要性并不大，因为 Node 本身已经有完备的模块化系统，并不需要像 Web 页面那样把所有代码打包成一个（或几个）产物文件！即使是为了兼容低版本 Node 环境，也可以使用更简单的方式解决 —— 例如 Babel，引入 Webpack 反而增加了系统复杂度以及不少技术隐患。

不过，出于学习目的，我们还是可以了解一下使用 Webpack 构建 Node 程序的方法及注意事项，包括：

  1. 需要 Webpack 的 target 值设置为 node ，这能让 Webpack 忽略 fs/path 等原生 Node 模块；
  2. 需要使用 externals 属性过滤 node_modules 模块，简单起见，也可以直接使用 webpack-node-externals 库；
  3. 需要使用 node 属性，正确处理 __dirname、__filename 值。

一个典型的 Node 构建配置如下：

const nodeExternals = require("webpack-node-externals");

module.exports = merge(WebpackBaseConfig, {
  // 1. 设置 target 为 node
  target: "node",
  entry: ...,
  module: [...],
  // 2. 过滤 node_modules 模块
  externals: [nodeExternals()],
  // 3. 设置 __dirname, __filename 值
  node: {
    __filename: false,
    __dirname: false,
  },
});

在此基础上，我们可以复用大多数 Loader、Plugin 及 Webpack 基础能力实现各种构建功能。

不过，需要特别注意，在 Node 代码中请务必慎用动态 require 语句，你很可能会得到预期之外的效果！例如对于下面的示例目录：

├─ example
│  ├─ src
│  │  ├─ foo.js
│  │  ├─ bar.js
│  │  ├─ unused.js
│  │  └─ main.js
│  ├─ package.json
│  └─ webpack.config.js

其中 main.js 为入口文件，代码：

const modules = ['foo', 'bar'].map(r => require(`./${r}.js`));

可以看到在 main.js 中并没有引用 unused.js ，但打包产物中却包含了 src 目录下所有文件：
请添加图片描述

这是因为 Webpack 遇到示例中的 require 语句时，仅仅依靠词法规则、静态语义、AST 等手段并不能推断出实际依赖情况，只能退而求其次粗暴地将所有可能用到的代码一股脑合并进来，这种处理手段很可能会带来许多意想不到的结果，很可能触发 BUG！

综上，建议尽量不要使用 Webpack 构建 Node 应用。

构建 Electron 应用

Electron 是一种使用 JavaScript、HTML、CSS 等技术构建跨平台桌面应用开发框架，这意味着我们能用我们熟悉的大部分 Web 技术 —— 例如 React、Vue、Webpack 等开发桌面级应用程序。实际上，许多大名鼎鼎的应用如 VSCode、Facebook Messenger、Twitch，以及国内诸多小程序 IDE 都是基于 Electron 实现的。

与 Web 页面不同，Electron 应用由一个 主进程 及若干 渲染进程 组成，进程之间以 IPC 方式通讯，其中：

  • 主进程是一个 Node 程序，能够使用所有 Node 能力及 Electron 提供的 Native API，主要负责应用窗口的创建与销毁、事件注册分发、版本更新等；
  • 渲染进程本质上是一个 Chromium 实例，负责加载我们编写的页面代码，渲染成 Electron 应用界面。

请添加图片描述

  • 提示：Chromium 是一个非常简洁的开源浏览器，许多浏览器都基于 Chromium 二次开发而成，例如 Chrome、Microsoft Edge、Opera 等。

Electron 这种多进程机构，要求我们能在同一个项目中同时支持主进程与若干渲染进程的构建，两者打包需求各有侧重。接下来我们将通过一个简单示例，逐步讲解如何使用 Webpack 搭建一套完备的 Electron 应用构建环境，示例文件结构如下：

8-3_electron-wp
├─ package.json
├─ webpack.main.config.js       // 主进程构建配置
├─ webpack.renderer.config.js   // 渲染进程构建配置
├─ src
│  ├─ main.js
│  ├─ pages
│  │  ├─ home
│  │     ├─ index.js
│  │  ├─ login
│  │     ├─ index.js

其中：

  • src/main.js 为主进程代码；
  • src/pages/${page name}/ 目录为渲染进程 —— 即桌面应用中每一个独立页面的代码；
  • 由于主进程、渲染进程的打包差异较大，这里为方便演示，直接写成两个配置文件：webpack.main.config.js 与 webpack.renderer.config.js。

Electron 主进程打包配置

主进程负责应用窗口的创建销毁，以及许多跨进程通讯逻辑，可以理解为 Electron 应用的控制中心，简单示例：

// src/main.js
const { app, BrowserWindow } = require("electron");

// 应用启动后
app.whenReady().then(() => {
  // 创建渲染进程实例
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });
  // 使用 BrowserWindow 实例打开页面
  win.loadFile("home.html");
});

代码核心逻辑是在应用启动后 （app.whenReady 钩子），创建 BrowserWindow 实例并打开页面。

  • 提示：建议结合 Electron 官方提供的 完整示例 一起学习。

Electron 主进程本质上是一个 Node 程序，因此许多适用于 Node 的构建工具、方法也同样适用主进程，例如 Babel、TypeScript、ESLint 等。与普通 Node 工程相比，构建主进程时需要注意：

  • 需要将 target 设置为 electron-main ，Webpack 会自动帮我们过滤掉一些 Electron 组件，如 clipboard、ipc、screen 等；
  • 需要使用 externals 属性排除 node_modules 模块，简单起见也可以直接使用 webpack-node-externals 包；
  • 生产环境建议将 devtools 设置为 false，减少包体积。

对应的配置脚本：

// webpack.main.config.js
const path = require("path");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  // 主进程需要将 `target` 设置为 `electron-main`
  target: "electron-main",
  mode: process.env.NODE_ENV || "development",
  // 开发环境使用 `source-map`，保持高保真源码映射，方便调试
  devtool: process.env.NODE_ENV === "production"? false: "source-map",
  entry: {
    main: path.join(__dirname, "./src/main"),
  },
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  },
  externals: [nodeExternals()],
};

至此，一个非常简单的主进程脚本与构建环境示例就搭建完毕了，执行下述命令即可完成构建工作：

npx webpack -c webpack.main.config.js

另外，安装 Electron 过程中可能会遇到网络超时问题，这是因为资源域已经被墙了，可以使用阿里云镜像解决：

ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" npm i -D electron

Electron 渲染进程打包配置

Electron 渲染进程本质上就一个运行在 Chromium 浏览器上的网页，开发方法基本等同于我们日常开发的普通 Web 页面，例如我们可以用 React 开发 Electron 渲染进程：

// src/home/index.js
import React from "react";
import ReactDOM from "react-dom";

const root = document.createElement("div");

ReactDOM.render(<h1>Hello world!</h1>, root);

document.body.append(root);

相应的，我们可以复用大部分普通 Web 页面构建的方式方法，主要差异点：

  1. 需要将 Webpack 的 target 配置设置为 electron-renderer；
  2. Electron 应用通常包含多个渲染进程，因此我们经常需要开启多页面构建配置；
  3. 为实现渲染进程的 HMR 功能，需要对主进程代码稍作改造。

第一点很简单：

// webpack.renderer.config.js
module.exports = {
  // 渲染进程需要将 `target` 设置为 `electron-renderer`
  target: "electron-renderer"
};

提示：Webpack 为 Electron 提供了三种特殊 target 值：electron-main/electron-renderer/electron-preload，分别用于主进程、Renderer 进程、Preload 脚本三种场景。

第二点可以用多 entry 配置实现，如：

// webpack.renderer.config.js
// 入口文件列表
const entries = {
  home: path.join(__dirname, "./src/pages/home"),
  login: path.join(__dirname, "./src/pages/login"),
};

// 为每一个入口创建 HTMLWebpackPlugin 实例
const htmlPlugins = Object.keys(entries).map(
  (k) =>
    new HtmlWebpackPlugin({
      title: `[${k}] My Awesome Electron App`,
      filename: `${k}.html`,
      chunks: [k],
    })
);

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: entries,
  target: "electron-renderer",
  plugins: [...htmlPlugins],
  // ...
};

第三点，由于 Webpack 的 HMR 功能强依赖于 WebSocket 实现通讯，但 Electron 主进程常用文件协议 file:// 打开页面，该协议不支持 WebSocket 接口，为此我们需要改造主进程启动代码，以 HTTP 方式打开页面代码，如：

function createWindow() {
  const win = new BrowserWindow({
    //...
  });

  if (process.env.NODE_ENV === "development") {
    // 开发环境下，加载 http 协议的页面，方便启动 HMR
    win.loadURL("http://localhost:8080/home");
  } else {
    // 生产环境下，依然使用 `file://` 协议
    win.loadFile(path.join(app.getAppPath(), "home.html"));
  }
}
  • 提示：在生产环境中，出于性能考虑，Electron 主进程通常会以 File URL Scheme 方式直接加载本地 HTML 文件，这样我们就不必为了提供 HTML 内容而专门启动一个 HTTP 服务进程。不过，同一份代码，用 File URL Scheme 和用 HTTP 方式打开，浏览器提供的接口差异较大，开发时注意区分测试接口兼容性。

至此，改造完毕

总结

综上，Webpack 不仅能构建一般的 Web 应用，理论上还适用于一切以 JavaScript 为主要编程语言的场景，包括 PWA、Node 程序、Electron 等，只是不同场景下的具体构建需求略有差异：

  • PWA：需要使用 workbox-webpack-plugin 自动生成 ServiceWorker 代码；使用 webpack-pwa-mainifest Manifest 文件；
  • Node 程序：需要设置 Webpack 配置项 target = "node"；需要使用 externals 属性过滤 node_modules 模块；需要使用 node 属性正确处理 Node 全局变量；
  • Electron 桌面应用：需要为主进程、渲染进程分别设置不同的构建脚本；同时需要注意开发阶段使用 HMR 的注意事项。

这种强大、普适的构建能力正是 Webpack 的核心优势之一，同类工具无出其右者，虽然不能一招鲜吃天下，但也足够覆盖大多数前端应用场景。站在学习的角度，你可以将主要精力放在 Webpack 基础构建逻辑、配置规则、常用组件上，遇到特殊场景时再灵活查找相应 Loader、Plugin 以及其它生态工具，就可以搭建出适用的工程化环境。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/757372.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Transformer教程之序列到序列模型（Seq2Seq）

Transformer教程之序列到序列模型（Seq2Seq）

在自然语言处理&#xff08;NLP&#xff09;的领域中&#xff0c;Transformer模型无疑是近年来最具革命性的方法之一。它的出现不仅大大提高了机器翻译、文本生成等任务的精度&#xff0c;还推动了整个深度学习研究的进步。本文将详细介绍Transformer模型中的序列到序列模型&am…
阅读更多...
Redisson（分布式锁、限流）

Redisson（分布式锁、限流）

注意Redisson是基于Redis的&#xff0c;所以必须先引入Redis配置&#xff08;参考SpringBoot集成Redis文章&#xff09; 1. 集成Redisson 引入依赖 <!-- 二选一,区别是第一个自动配置&#xff0c;第二个还需要手动配置也就是第二步自定义配置&#xff0c;注意版本号&…
阅读更多...
Java对应C++ STL的用法

Java对应C++ STL的用法

sort&#xff1a; 1&#xff1a;java.util.Arrays中的静态方法Arrays.sort()方法&#xff0c;针对基本数据类型和引用对象类型的数组元素排序 2&#xff1a;java.util.Collections中的静态方法的Collections.sort()方法&#xff0c;针对集合框架中的动态数组&#xff0c;链表&…
阅读更多...
【mysql的行记录格式】

【mysql的行记录格式】

记录头信息 除了变长字段长度列表、NULL值列表之外&#xff0c;还有一个用于描述记录的记录头信息&#xff0c;它是由固定的5个字节组成。5个字节也就是40个二进制位&#xff0c;不同的位代表不同的意思&#xff0c;如图&#xff1a; 记录的真实数据 对于record_format_demo表来…
阅读更多...
linux中的各种指令

linux中的各种指令

按文件的大小进行查找 find / usr -size 100M 在home路径下创建txt文件 touch test.txt 查看test.txt文件中的内容&#xff1a; cat test.txt通过指令pwd可以查看当前所处路径。 切换超级用户的指令&#xff1a; su - root 离开时可以使用指令&#xff1a;exit grep指…
阅读更多...
.net 项目中配置 Swagger

.net 项目中配置 Swagger

一、前言 二、Swagger 三、.net 项目中添加Swagger 1、准备工作 &#xff08;1&#xff09;.net项目 &#xff08;2&#xff09;SwaggerController &#xff08;3&#xff09;XML文档注释 2、安装Swagger包 3、 添加配置swagger中间件 &#xff08;1&#xff09;添加S…
阅读更多...
深入理解Unix/Linux中sync、fsync、fdatasync和sync_file_range系统调用以及他们的区别

深入理解Unix/Linux中sync、fsync、fdatasync和sync_file_range系统调用以及他们的区别

前言 在linux内核中都有缓冲区或者页面高速缓存&#xff0c;大多数磁盘IO都是通过缓冲写的。当你想将数据write进文件时&#xff0c;内核通常会将该数据复制到其中一个缓冲区中&#xff0c;如果该缓冲没被写满的话&#xff0c;内核就不会把它放入到输出队列中。当这个缓冲区被…
阅读更多...
5000字深入讲解：企业数字化转型优先从哪个板块开始？

5000字深入讲解：企业数字化转型优先从哪个板块开始？

很多企业都知道数字化转型重要&#xff0c;但不知道应该怎样入手&#xff0c;分哪些阶段。以下引用国内领先数字化服务商 织信Informat 的数字化转型方法论材料&#xff0c;且看看他们是如何看待数字化转型的&#xff1f;数字化转型应该从哪先开始&#xff1f;如何做&#xff1…
阅读更多...
编译工具-Gradle

编译工具-Gradle

文章目录 Idea中配置Gradle项目project目录settings.gradlebuild.gradlegradlewgradlew.bat Gradle Build生命周期编写Settings.gradle编写Build.gradleTasksPlugins Idea中配置 配置项&#xff1a;gradle位置 及仓库位置 Gradle项目 Task&#xff0c;settings.gradle,build.…
阅读更多...
【ai】tx2 nx：ubuntu18.04 yolov4-triton-tensorrt 成功部署server 运行

【ai】tx2 nx：ubuntu18.04 yolov4-triton-tensorrt 成功部署server 运行

isarsoft / yolov4-triton-tensorrt运行发现插件未注册？ 【ai】tx2 nx： jetson Triton Inference Server 部署YOLOv4 【ai】tx2 nx： jetson Triton Inference Server 运行YOLOv4 对main 进行了重新构建 【ai】tx2 nx ：ubuntu查找NvInfer.h 路径及哪个包、查找符号【ai】tx2…
阅读更多...
调用京灵平台接口，很详细

调用京灵平台接口，很详细

调用京灵平台接口&#xff0c;很详细 一、准备1、开发资源2、申请环境 二、测试接口调用1、查看接口文档2、查看示例代码3、引入对应依赖4、改造后需要的依赖5、测试调用 三、工具类1、配置dto2、公共参数dto3、请求参数dto4、响应参数dto4、调用工具类&#xff08;重要&#x…
阅读更多...
免费翻译API及使用指南——百度、腾讯

免费翻译API及使用指南——百度、腾讯

目录 一、百度翻译API 二、腾讯翻译API 一、百度翻译API 百度翻译API接口免费翻译额度&#xff1a;标准版&#xff08;5万字符免费/每月&#xff09;、高级版&#xff08;100万字符免费/每月-需个人认证&#xff0c;基本都能通过&#xff09;、尊享版&#xff08;200万字符免…
阅读更多...
matlab中simulink仿真软件的基础操作

matlab中simulink仿真软件的基础操作

&#xff08;本内容源自《详解MATLAB&#xff0f;SIMULINK 通信系统建模与仿真》 刘学勇编著的第二章内容&#xff0c;有兴趣的可以阅读该书&#xff09; 例&#xff1a;简单系统输入为两个不同频率的正弦、余弦信号&#xff0c;输出为两信号之和&#xff0c;建立模型。 在…
阅读更多...
webpack源码深入--- webpack的编译主流程

webpack源码深入--- webpack的编译主流程

webpack5的编译主流程 根据watch选项调用compiler.watch或者是compiler.run()方法 try {const { compiler, watch, watchOptions } create();if (watch) {compiler.watch(watchOptions, callback);} else {compiler.run((err, stats) > {compiler.close(err2 > {callb…
阅读更多...
使用鸿蒙HarmonyOs NEXT 开发 快速开发 简单的购物车页面

使用鸿蒙HarmonyOs NEXT 开发 快速开发 简单的购物车页面

目录 资源准备&#xff1a;需要准备三张照片&#xff1a;商品图、向下图标、金钱图标 1.显示效果&#xff1a; 2.源码&#xff1a; 资源准备&#xff1a;需要准备三张照片&#xff1a;商品图、向下图标、金钱图标 1.显示效果&#xff1a; 定义了一个购物车页面的布局&#x…
阅读更多...
[方法] Unity 3D模型与骨骼动画

[方法] Unity 3D模型与骨骼动画

1. 在软件中导出3D模型 1.1 3dsmax 2014 1.1.1 TGA转PNG 3dsmax的贴图格式为tga&#xff0c;我们需要在在线格式转换中将其转换为Unity可识别的png格式。 1.1.2 模型导出 导出文件格式为fbx。在导出设置中&#xff0c;要勾选三角算法&#xff0c;取消勾选摄像机和灯光&#…
阅读更多...
mysql解压版本安装5.7

mysql解压版本安装5.7

1. 官网下载好解压版本 我这边5.7版本 https://dev.mysql.com/downloads/file/?id523570 mysql官网 创建 my.ini文件 内容如下 [client] #客户端设置&#xff0c;即客户端默认的连接参数# socket /data/mysqldata/3306/mysql.sock #用于本地连接的socket套接字 # 默…
阅读更多...
运维锅总详解HAProxy

运维锅总详解HAProxy

本文尝试从HAProxy简介、HAProxy工作流程及其与Nginx的对比对其进行详细分析&#xff1b;在本文最后&#xff0c;给出了为什么Nginx比HAProxy更受欢迎的原因。希望对您有所帮助&#xff01; HAProxy简介 HAProxy&#xff08;High Availability Proxy&#xff09;是一款广泛使…
阅读更多...
【知识学习】阐述Unity3D中Profile和性能的概念及使用方法示例

【知识学习】阐述Unity3D中Profile和性能的概念及使用方法示例

在Unity3D中&#xff0c;"Profile"和"性能"是两个相关但不同的概念&#xff0c;它们在游戏开发中扮演着重要的角色。 Profile&#xff08;配置文件&#xff09; "Profile"在Unity中通常指的是一种配置文件&#xff0c;它包含了一系列的设置和参…
阅读更多...
JAVA医院绩效考核管理系统源码：系统优势、系统目的、系统原则 （自主研发 功能完善 可直接上项目）

JAVA医院绩效考核管理系统源码：系统优势、系统目的、系统原则 （自主研发 功能完善 可直接上项目）

JAVA医院绩效考核管理系统源码&#xff1a;系统优势、系统目的、系统原则 &#xff08;自主研发 功能完善 可直接上项目&#xff09; 医院绩效考核系统优势 1.实现科室负责人单独考核 对科室负责人可以进行单独考核、奖金发放。 2. 科室奖金支持发放到个人 支持奖金二次分配&…
阅读更多...
最新文章

Copyright @ 2022~2023