一. 介紹

根據(jù)百度百科的說法：低代碼開發(fā)平臺（LCDP）是無需編碼（0代碼）或通過少量代碼就可以快速生成應(yīng)用程序的開發(fā)平臺。通過可視化進(jìn)行應(yīng)用程序開發(fā)的方法（參考可視編程語言），使具有不同經(jīng)驗(yàn)水平的開發(fā)人員可以通過圖形化的用戶界面，使用拖拽組件和模型驅(qū)動的邏輯來創(chuàng)建網(wǎng)頁和移動應(yīng)用程序。?[1]??低代碼開發(fā)平臺（LCDP）的正式名稱直到2014年6月才正式確定，整個低代碼開發(fā)領(lǐng)域卻可以追溯到更早前第四代編程語言和快速應(yīng)用開發(fā)工具。

目前市面上大量成熟的低代碼平臺可以供我們使用和研究。但是個人覺得還是有必要去從0實(shí)現(xiàn)一套低代碼平臺。最主要我們要從中了解到一套完整低代碼平臺設(shè)計(jì)的思想。

二. 項(xiàng)目目錄

考慮到項(xiàng)目前后端都有，我們需要根據(jù)功能進(jìn)行拆分。

1. packages

核心的功能包packages

現(xiàn)階段先把packages拆分成為5個核心包

• commonUI（項(xiàng)目使用的UI庫）

• client （前端核心）

• server （后端核心）

• types ?（TS類型聲明）

• tools ? (輔助工具）

2. script

用做打包時(shí)候的一些腳本配置

沒什么好說的，暫時(shí)分成dev和prod環(huán)境

3. qa-core

編寫單元測試的文件

三. 項(xiàng)目搭建

考慮到目前是多包管理，有各自獨(dú)立的版本，每個子包之間互相依賴，結(jié)合現(xiàn)在社區(qū)比較活躍的多倉模式。我選擇使用monorepo。包管理工具我這里選擇使用pnpm。

1. 目錄初始化

在本地新建一個lowCaseSixMembered(我自己的文件夾，大家取名字隨意）此為項(xiàng)目的根目錄

注意：保證自己的node > 16版本才可以使用pnpm

在lowCaseSixMembered下： pnpm init

初始化項(xiàng)目然后修改package.json文件里面的name字段

? "name": "low-case"

low-case就是你項(xiàng)目的文件名

新建三個文件夾

• packages

• qa-core

• script

其他兩個先不管他，主要關(guān)心packages里面

2. packages目錄

先進(jìn)到packages文件夾里面。然后執(zhí)行pnpm init 同樣的步驟修改一下package.json文件里面的name字段。

? "name": "six-membered"

按照上面的文件新建5個文件

• client

• commonUI

• server

• tools

• types

? ? // 分別進(jìn)到對應(yīng)的文件夾中init一下

cd client && pnpm init

修改一下對應(yīng)的package.json

js復(fù)制代碼 ? ?"name": "@six-membered/client"

這里注意一下name，最好使用@開頭。表示都是同一個包下面的子包。具體name屬性可以看文檔 docs.npmjs.com/organizatio…

3. 建立包之間的聯(lián)系

回到根目錄，我們?nèi)绾卧诨ハ嘁胮ackages里面的子包呢？這里就要使用到pnpm了。 在根目錄上創(chuàng)建 pnpm-workspace.yaml文件 可以在該配置文件中指定這個倉庫中有多少個項(xiàng)目。

js復(fù)制代碼 ? ?// pnpm-workspace.yaml ?? ?packages: ?? ? ? ? ?- 'packages/*' ?? ? ? ? ?- 'qa-core' ?? ? ? ? ?- 'script'

互相調(diào)用。 在根目錄執(zhí)行：

js復(fù)制代碼 ? ?pnpm install @six-membered/client ?-w ?? ?pnpm install @six-membered/tools ?-w ?? ?pnpm install @six-membered/server ?-w ?? ?pnpm install @six-membered/ui ?-w

-w?表示安裝到共公模塊的 package.json 中，也就是根目錄下的 package.json。

這時(shí)候根目錄會出現(xiàn)一個node_modules,看一下文件結(jié)構(gòu)：

表示packages下面的子項(xiàng)目都以軟鏈的形式添加到對應(yīng)的依賴包中。

4. 測試

1. 在tools中新建文件夾src/index.js

js復(fù)制代碼 ? ?export const myTest = () => console.log(11111111);

修改package.json文件

main指定入口文件。 type = module 表示模塊使用es6加載

1. 在client文件中新建文件夾src/index.js 同樣修改package.json文件（同上） 修改index.js里面的代碼：然后在控制臺執(zhí)行：

可以看到模塊被成功加載和執(zhí)行。 基本搭建到這里就完成了，接下來按照步驟一步一步來實(shí)現(xiàn)就好