整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
信小程序開發過程中，許多開發者會遇到 小程序 與 Web 端一起的需求，由于 小程序 與 Web 端的運行環境不同，開發者往往需要維護兩套類似的代碼，這對開發者來說比較耗費力氣，并且會出現不同步的情況。
小程序作為web的配套必需品，已經成為開發者不可避免的工作。多終端、多形態的開發無疑徒增工作量，費力不討好。Kbone 就是一個致力于微信小程序和 Web 端同構的解決方案。一套代碼同時開發完微信小程序以及web端。
基本結構
首先，我們來看下一個基本的 kbone 項目的目錄結構（這里的 todo 是基于 Vue 的示例， kbone 也有 React ， Preact ， Omi 等版本，詳情可移步 kbone github ）。
因為 kbone 是為了解決 小程序 與 Web 端的問題，所以每個目錄下的配置都會有兩份（小程序 與 Web 端各一份）
入口
不管是 小程序 端還是 Web 端，都需要入口文件。在 src/index 目錄下， main.js 為 Web 端用主入口， main.mp.js 則為 小程序 端用主入口。
當然，Web 端會比 小程序 多一個入口頁面，即 index.html （位于根目錄下）。
下面兩段代碼分別是 小程序端 入口與 Web 端入口的代碼，可以看到 小程序端的入口代碼封裝在 createApp 函數里面（這里固定即可），內部會比 Web 端多一個創建 app 節點的操作，其他的基本就是一致的。
todo.vue
在上面的入口圖可以看到，源碼目錄中，除了入口文件分開之前，頁面文件就是共用的了，這里直接使用 Vue 的寫法即可，不用做特殊的適應。
配置
寫完代碼之后，我們要怎么跑項目呢？這時，配置就派上用場啦。
Web 端配置為正常的 Vue 配置，小程序端配置與 Web 端配置的唯一不同就是需要引入 mp-webpack-plugin 插件來將 Vue 組件轉化為小程序代碼。
構建代碼
接著，我們需要構建代碼，讓代碼可以運行到各自的運行環境中去。構建完成后，生產代碼會位于 dist 目錄中。
小程序端 的構建會比 Web 端的構建多一個步驟，就是 npm 構建。
進入 dist/mp 目錄，執行 npm install 安裝依賴，用開發者工具將 dist/mp 目錄作為小程序項目導入之后，點擊工具欄下的 構建 npm ，即可預覽效果。
效果
最后，我們來看一下 todo 的效果。kbone 初體驗，done~
todo 代碼可到 kbone/demo13 自提。
具體方案實現
接下來就來探討下具體方案的實現。
社區 Web 端是基于 Vue 實現的，使用了 Vue-router、Vuex 等插件。Vue 想必大家挺熟悉的了，它是市面上一款非常流行的 Web 框架，提供組件化等特性，其原理大致如下：
Vue 模板可以認為是一種附加了一些特殊語法的 HTML 片段，一般來說一份 Vue 模板對應一個組件，在構建階段編譯成調用 Dom 接口的 JS 函數，調用此 JS 函數就會創建出組件對應的 Dom 樹片段進而渲染到瀏覽器上。小程序里是支持運行 JS 的，但是這里用到的 Dom 接口和渲染到瀏覽器上的功能小程序不具備，所以無法直接將 Web 端社區代碼移植到小程序中。原因就在于小程序為了安全和性能而采用了雙線程的架構，運行用戶 JS 代碼的邏輯層是一個純粹的 JSCore，沒有任何瀏覽器相關的實現，這里得想辦法將 Web 端代碼轉成小程序代碼。
業界常見做法：將 Vue 模板直接轉成小程序的 WXML 模板
那么問題來了，如何將 Vue 代碼轉成小程序代碼？這里先看下業界常見的做法：將 Vue 模板直接轉成小程序的 WXML 模板。
使用做法相當于拋棄了瀏覽器中建 Dom 樹的過程，而是直接交由小程序來對模板進行編譯創建出小程序的模板樹，進而渲染到小程序頁面中。
一般來說這個做法對于普通場景是夠用的，但是對于一些更復雜的場景就很不好處理了，比如社區中的一個簡單例子：社區帖子詳情展示富文本內容，點擊內容中的圖片可預覽。
這主要是因為 Vue 模板和 WXML 模板的語法并不是直接對等的，Vue 的特性設計也和小程序的設計無法劃等號，這自然就導致了部分 Vue 特性的丟失。比如像 Vue 中的 v-html 指令、ref 獲取 Dom 節點、過濾器等就通通用不了。當然不止是 Vue 自身的特性，一些原本依賴 Dom/Bom 接口的 Vue 插件也無法使用，比如 Vue-router 等，而這些正是社區高度依賴的，在不對社區代碼做大范圍改造的話是無法使用此方案的。
此路不通，那還有其他的方法么？
換個思路：做一個適配層
答案是有的，這里我們就得換一種思路來解決這個問題。回到最初的點上，我們無法將 Web 端代碼移植到小程序中是因為小程序沒有 Dom 接口，那么我們想辦法做出一個適配層，將這個差異給抹掉不就行了么？
有了想法就要實施，仿造出 Dom 接口并不難，事實上在 Nodejs 端就有人做過類似的事，比如 jsDom 這個庫的實現，讓我們可以在沒有真實瀏覽器環境下可以對一些依賴 Dom 接口的 Web 端代碼進行測試。
仿造了 Dom 接口給 Vue 調用，進而創建出了仿造 Dom 樹。根據前面提到的小程序架構，用戶的 JS 代碼是執行在邏輯層的，也就是說我們創建出的 Dom 樹也是存在與邏輯層的內存之中，接下來要解決的難題是如何將這棵 Dom 樹渲染到小程序頁面中。
這里需要先簡單介紹一下小程序的渲染原理：小程序的雙線程架構，邏輯層會執行用戶的 JS 代碼進而產生一組數據，這組數據會發往視圖層；視圖層接收到數據后，結合用戶的 WXML 模板創建出組件樹，之后小程序再將組件樹渲染出來。這里的組件樹和 Dom 樹很類似，只是它是由官方內置組件或自定義組件拼接而成而不是 Dom 節點。這里我們能不能將仿造出來的 Dom 樹映射到小程序的組件樹上？
小程序組件樹是根據 WXML 模板創建出來的，而仿造 Dom 樹結構是不穩定的，我們無法提前預知它會生成什么樣的結構，也就無法提前準備后可以描述任意 Dom 樹的 WXML 模板，除非直接將 Vue 模板轉換成 WXML 模板，但這樣又繞回前面的問題上了。
小程序組件樹中的組件有兩種：內置組件和自定義組件，內置組件是由官方提供的如 video、map 這樣的組件，而自定義組件是一種支持由用戶利用現有組件自行組裝的組件，能否利用它來做些什么？
使用 Web 端概念來做個簡單解釋，內置組件就像是 div、span 這些 HTML 標簽，而自定義組件就像是 Web 中的 Vue 組件。Vue 組件可以將 HTML 標簽以及其他的 Vue 組件進行組裝，自定義組件同理，主要用于功能模塊的抽象、封裝和復用。不過自定義組件有個很奇妙的特性，它支持自引用，也就是說它可以自己引用自己來進行組裝。
自定義組件可以自己引用自己，那么我們就可以利用這個特性來進行遞歸創建組件，進而創建出一棵組件樹：
比如上圖的例子，我們封裝了一個 custom-dom 組件，這個組件里面也使用了 custom-dom 組件用于渲染子組件。那么只要我們執行一下 setData，把 children 數據傳遞過去就可以創建出子組件，子組件本身也是 custom-dom 組件，它同樣可以執行這個邏輯把各自的子組件創建出來，這樣就實現了組件的遞歸創建，只要我們擁有完整的 Dom 樹結構，就可以創建出相對應的一棵組件樹。
這里遞歸的終止條件是遇到特定節點、文本節點或者孩子節點為空。然后在創建出組件樹后，將 Dom 節點和自定義組件實例進行綁定以便后續的 Dom 更新和操作即可。
我們將其歸納為兩個模塊：仿造接口和自定義組件。正因為這個方案是通過提供適配器的方式來仿造出 Web 環境，所以用戶代碼不需要做任何魔改，大部分特性都可以繼續使用不需要被刪減，比如 vue-router、window.location 操作等。
原本 Web 端代碼是基于 Vue 來搭建的，其中還用到了諸多插件/庫，如 Vue-router、Vuex、Markdown-it 等，同時還支持了服務端渲染。但是不管 Web 端是怎么實現的，底層終究是調瀏覽器的那些接口，所以對于用戶層面的代碼我們不做任何調整，只是將瀏覽器那一層替換掉即可。
整個構建流程是基于 Webpack 來實現的，使用 Kbone 構建出小程序代碼也是基于 Webpack 來實現，只需要在原本 Web 端構建流程上實現一個 Webpack 插件，在構建原本 Web 端代碼到小程序端時追加 Kbone 和一些小程序相關的代碼即可
者：大轉轉FE
轉發鏈接：https://mp.weixin.qq.com/s/gZVn9eDruyv7G_UJFTPuGQ
通過上一篇文章 「免費開源」基于Vue和Quasar的業務數據crud（七） 的介紹，crudapi-admin-web基本功能全部實現了，本文主要介紹前端打包和docker部署相關內容。
Docker是一個開源的應用容器引擎，讓開發者可以打包他們的應用以及依賴包到一個可移植的鏡像中，然后發布到任何流行的 Linux或Windows 機器上，也可以實現虛擬化。容器是完全使用沙箱機制，相互之間不會有任何接口。采用docker技術可以很方便地實現持續集成和交付CI/CD。
build: {
vueRouterMode: 'history', // available values: 'hash', 'history'
publicPath: '/crudapi/',
distDir: `dist/${ctx.modeName}/crudapi`
}通常將前端打包之后的文件放在一個子目錄下，方便和其它系統集成，比如可以放在spring boot項目的resources/static/crudapi目錄下，避免放在根目錄，所以這里配置publicPath為crudapi。
FROM node:lts-alpine as builder
COPY package.json /crudapi-admin-web/package.json
WORKDIR /crudapi-admin-web
RUN npm install
COPY . /crudapi-admin-web/
WORKDIR /crudapi-admin-web
RUN npm run build
FROM nginx:latest
WORKDIR /crudapi-admin-web
COPY --from=builder /crudapi-admin-web/dist/spa .
COPY ./docker/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80構建分為兩個階段：
優化： package.json放在第一步copy，目的是為了緩存，從而提高鏡像構建速度，因為通常情況下package.json不回頻繁修改，只要package.json不變，后面的npm install命令就不會重復構建。
server {
listen 80;
server_name localhost;
charset 'utf-8';
#access_log /var/log/nginx/host.access.log main;
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location ~ /api {
proxy_pass http://demo.crudapi.cn;
}
location / {
root /crudapi-admin-web;
index index.html index.htm;
try_files $uri $uri/ /crudapi/index.html;
}
}default.conf中主要配置兩個location規則
.DS_Store
.git
.gitignore
node_modules
dist
.quasar
.vscode
.dockerignore
package-lock.json
Dockerfile
*.mddockerignore排除的不需要的文件，避免構建過程中copy無用文件。
本地打包docker和運行
docker build -t crudapi-admin-web:latest .
docker rm -f crudapi-admin-web
docker run -d -p 80:80 --name crudapi-admin-web crudapi-admin-web:latest
docker ps | grep crudapi-admin-web最新的docker鏡像已經自動上傳到docker官網hub，https://hub.docker.com/repository/docker/crudapi/crudapi-admin-web ，直接pull也可以。
docker pull crudapi/crudapi-admin-web:latest
docker tag crudapi/crudapi-admin-web:latest crudapi-nginx:latestdemo
訪問 http://127.0.0.1/crudapi
本文主要介紹了vue前端打包和docker部署相關內容，到目前為止，crudapi-admin-web代碼已經完成，后續會繼續優化代碼，文檔也會持續更新。每一篇文章對應的代碼，都打上了tag，命名規則為t1,t2..., 歡迎下載代碼學習和交流。
溫馨提示：點擊“了解更多”可以去官網查看源碼！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
