使用webpack手動創建一個完整項目的全過程

.創建文件夾"webpack-study"

2.使用webstrom打開文件夾所在位置。在根目錄上創建一個文件，文件命名為“src”,在src文件下新建css、images、js文件夾，在src文件夾下新建index.html文件和main.js文件

3.現在我們需要完成一個隔行變色的需求，來熟悉webpack的使用過程。在index.html文件下添加6個li

<li>1<li>
<li>2<li>
<li>3<li>
<li>4<li>
<li>5<li>
<li>6<li>

4.我準備使用jquery來完成隔行變色.首先初始化webpack，在終端輸入

cnpm init -y

在根目錄下會生成一個package.json的文件，里面是相應的配置信息

5.通過webpack來安裝jquery。在終端輸入

cnpm i jquery -S

jQuery安裝成功信息

成功之后，根目錄下會生成一個“node_modules”的文件夾

6.在“main.js”中通過import $ from 'jquery'來導入模塊

導入模板

7.在index.html中引入main.js文件，寫的效果在瀏覽器中并沒有生效。import語法太高級，瀏覽器沒辦法識別。這個時候我們就必須通過webpack處理一下，打包出來一個文件。在終端中輸入

webpack ./src/main.js -o ./dist/bundle.js

打包

文件夾中也生成出來dist文件夾和bundle.js文件

但是終端報了一個警告

警號內容

黃色部分的警告的意思是,沒有設置模式,有開發模式和生產模式兩種,接下來,找到package.json.添加上"dev"和"build"這兩個信息以及他們的值.

"script":{
          "test":"echo\"Error:no test specified\" && exit 1",  
          "dev":"webpack -- mode development",
          "build": "webpack --mode production"

}

ni-app 是公司常用的一個框架，隨著 vue3 的普及，好多公司的項目都已經開始使用 vue3 + uni-app + vite 開發項目，順手記錄和分享一下我在這過程中遇到的問題。

一、npx 與 npm 區別

npm 都很熟，可是與 npm 如此相似的 npx 是干嘛的呢？我們為甚要介紹 npx ?

由于 uni-app 官方提供創建命令使用的是 npx，所以我們先來了解下 npx 是干什么的？它與 npm 的區別。

npx 是 npm 的高級版本，它從 npm v5.2 版本開始引入的，與 npm 綁定在一起，無需額外安裝，具有更大的功能。npx 是 npm exec 的別名，如果沒有時，可以手動：npm install -g npx 進行安裝。

區別：

npm 只能通過 package.json 里定義然后執行命令，npx 可以直接執行 node_module 包中的命令。
npx 可以指定 node 、命令的版本，解決不同項目使用不同版本的命令問題。
臨時安裝可執行依賴包，不用全局安裝，也不用擔心長期的污染。

二、使用 Vue3/Vite 版創建項目

2.1、創建 js 開發的項目：

npx degit dcloudio/uni-preset-vue#vite my-vue3-js

執行命令后會自動創建項目，然后執行：

cd my-vue3-js  // 進入my-vue3-js項目

執行：

npm install

依賴下載完成之后，就可以使用命令：

npm run dev:h5

啟動網頁服務。至此，項目就創建完成，并可進行預覽：

2.2、創建以 typeScript 開發的項目

創建命令：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

回車開始創建的時候會報錯：could not fetch remote https://github.com/dcloudio/uni-prset-vue，由于網絡或者域名攔截引起的錯誤。

可以直接打開 github 地址：https://github.com/dcloudio/uni-preset-vue

或者 gitee 下載地址：https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

下載 zip 壓縮包。

解壓之后，運行：

npm install

安裝依賴完成之后，可以使用：

npm run dev:h5

就可以正常運行項目了。

如果不熟悉 uni-app 項目的同學，可以自己在官網看看它的運行命令都有哪些以及它們的意義。

官方創建文檔地址：https://uniapp.dcloud.io/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app

三、項目結構及作用

以 uni-app + vue3 + vite + ts 項目為例，項目結構目錄如圖：

index.html 首頁入口文件。
package.json 項目配置文件。
tsconfig.json typescript 配置文件。
vite.config.ts vite 的配置文件。

src 存放開發資源文件，基本要做的事情都在這個目錄內，里面又包含了幾個目錄文件：

pages 存放所有頁面文件，我們創建的頁面組件都放入該文件夾。
static 存放靜態資源的文件夾。
App.vue 頁面入口文件，所有頁面都在 App.vue 下進行切換。
env.d.ts 第三方模塊的類型聲明文件。
main.ts 項目入口文件，因為使用 ts 語法，所以后綴是 .ts
mainfest.json 應用配置文件，用于指定應用名稱、圖標、權限等。
pages.json 全局配置文件，可以配置頁面文件路徑、窗口樣式、原生的導航欄、底部tab欄等。
uni.scss 是uni-app的樣式包，在其他文件中可以快速引用樣式包內的樣式。

小新編譯自 Insight Data Blog

量子位出品 | 公眾號 QbitAI

寫個網頁能有多麻煩？在大多數公司里，這項工作分為三步：

1. 產品經理完成用戶調研任務后，列出一系列技術要求；

2. 設計師根據這些要求來設計低保真原型，逐漸修改得到高保真原型和UI設計圖；

3. 工程師將這些設計圖實現為代碼，最終變成用戶使用的產品。

這么多環節，任何地方出一點問題，都會拉長開發周期。因此，不少公司，比如Airbnb已經開始用機器學習來提高這個過程的效率。

△ Airbnb內部的AI工具，從圖紙到代碼一步到位

看起來很美好，但Airbnb還沒公開該模型中端到端訓練的細節，以及手工設計的圖像特征對該模型的貢獻度。這是該公司特有的閉源解決方案專利，可能不會進行公開。

好在，一個叫Ashwin Kumar的程序員創建了一個開源版本，讓開發者/設計師的工作變得更簡單。

以下內容翻譯自他的博客：

理想上，這個模型可以根據網站設計的簡單手繪原型，很快地生成一個可用的HTML網站：

△ SketchCode模型利用手繪線框圖來生成HTML網站

事實上，上面例子就是利用訓練好的模型在測試集上生成的一個實際網站，代碼請訪問：https://github.com/ashnkumar/sketch-code。

從圖像標注中獲取靈感

目前要解決的問題屬于一種更廣泛的任務，叫做程序綜合（program synthesis），即自動生成工作源代碼。盡管很多程序綜合研究通過自然語言規范或執行追蹤法來生成代碼，但在當前任務中，我會充分利用源圖像，即給出的手繪線框圖來展開工作。

在機器學習中有一個十分熱門的研究領域，稱為圖像標注（image caption），目的是構建一種把圖像和文本連接在一起的模型，特別是用于生成源圖像內容的描述。

△ 圖像標注模型生成源圖像的文本描述

我從一篇pix2code論文和另一個應用這種方法的相關項目中獲得靈感，決定把我的任務按照圖像標注方式來實現，把繪制的網站線框圖作為輸入圖像，并將其相應的HTML代碼作為其輸出內容。

注：上段提到的兩個參考項目分別是

pix2code論文：https://arxiv.org/abs/1705.07962

floydhub教程：https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org

獲取合適的數據集

確定圖像標注方法后，理想中使用的訓練數據集會包含成千上萬對手繪線框圖和對應的HTML輸出代碼。但是，目前還沒有我想要的相關數據集，我只好為這個任務來創建數據集。

最開始，我嘗試了pix2code論文給出的開源數據集，該數據集由1750張綜合生成網站的截圖及其相應源代碼組成。

△ pix2code數據集中的生成網站圖片和源代碼

這是一個很好的數據集，有幾個有趣的地方：

該數據集中的每個生成網站都包含幾個簡單的輔助程序元素，如按鈕、文本框和DIV對象。盡管這意味著這個模型受限于將這些少數元素作為它的輸出內容，但是這些元素可通過選擇生成網絡來修改和擴展。這種方法應該很容易地推廣到更大的元素詞匯表。
每個樣本的源代碼都是由領域專用語言（DSL）的令牌組成，這是該論文作者為該任務所創建的。每個令牌對應于HTML和CSS的一個片段，且加入編譯器把DSL轉換為運行的HTML代碼。

彩色網站圖像變手繪圖

為了修改我的任務數據集，我要讓網站圖像看起來像手工繪制出的。我嘗試使用Python中的OpenCV庫和PIL庫等工具對每張圖像進行修改，包括灰度轉換和輪廓檢測。

最終，我決定直接修改原始網站的CSS樣式表，通過執行以下操作：

1. 更改頁面上元素的邊框半徑來平滑按鈕和DIV對象的邊緣；

2. 模仿繪制的草圖來調整邊框的粗細，并添加陰影；

3. 將原有字體更改為類似手寫的字體；

最終實現的流程中還增加了一個步驟，通過添加傾斜、移動和旋轉來實現圖像增強，來模擬實際繪制草圖中的變化。

使用圖像標注模型架構

現在，我已經處理好數據集，接下來是構建模型。

我利用了圖像標注中使用的模型架構，該架構由三個主要部分組成：

1. 一種使用卷積神經網絡（CNN）的計算機視覺模型，從源圖像提取圖像特征；

2. 一種包含門控單元GRU的語言模型，對源代碼令牌序列進行編碼；

3. 一個解碼器模型，也屬于GRU單元，把前兩個步驟的輸出作為輸入，并預測序列中的下一個令牌。

△ 以令牌序列為輸入來訓練模型

為了訓練模型，我將源代碼拆分為令牌序列。模型的輸入為單個部分序列及它的源圖像，其標簽是文本中的下一個令牌。該模型使用交叉熵函數作為損失函數，將模型的下個預測令牌與實際的下個令牌進行比較。

在模型從頭開始生成代碼的過程中，該推理方式稍有不同。圖像仍然通過CNN網絡進行處理，但文本處理開始時僅采用一個啟動序列。在每個步驟中，模型對序列中輸出的下個預測令牌將會添加到當前輸入序列，并作為新的輸入序列送到模型中；重復此操作直到模型的預測令牌為，或該過程達到每個文本中令牌數目的預定義值。

當模型生成一組預測令牌后，編譯器就會將DSL令牌轉換為HTML代碼，這些HTML代碼可以在任何瀏覽器中運行。

用BLEU分數評估模型

我決定使用BLEU分數來評估模型。這是機器翻譯任務中常用的一種度量標準，通過在給定相同輸入的情況下，衡量機器生成的文本與人類可能產生內容的近似程度。

實際上，BLEU通過比較生成文本和參考文本的N元序列，以創建修改后的準確版本。它非常適用于這個項目，因為它會影響生成HTML代碼中的實際元素，以及它們之間的相互關系。

最棒的是，我還可以通過檢查生成的網站來比較當前的實際BLEU分數。

△ 觀察BLEU分數

當BLEU分數為1.0時，則說明給定源圖像后該模型能在正確位置設置合適的元素，而較低的BLEU分數這說明模型預測了錯誤元素或是把它們放在相對不合適的位置。我們最終模型在評估數據集上的BLEU分數為0.76。

福利：定制網頁風格

后來，我還想到，由于該模型只生成當前頁面的框架，即文本的令牌，因此我可以在編譯過程中添加一個定制的CSS層，并立刻得到不同風格的生成網站。

△ 一個手繪圖生成多種風格的網頁

把風格定制和模型生成兩個過程分開，在使用模型時帶來了很多好處：

1.如果想要將SketchCode模型應用到自己公司的產品中，前端工程師可以直接使用該模型，只需更改一個CSS文件來匹配該公司的網頁設計風格；

2. 該模型內置的可擴展性，即通過單一源圖像，模型可以迅速編譯出多種不同的預定義風格，因此用戶可以設想出多種可能的網站風格，并在瀏覽器中瀏覽這些生成網頁。

總結和展望

受到圖像標注研究的啟發，SketchCode模型能夠在幾秒鐘內將手繪網站線框圖轉換為可用的HTML網站。

但是，該模型還存在一些問題，這也是我接下來可能的工作方向：

1. 由于這個模型只使用了16個元素進行訓練，所以它不能預測這些數據以外的令牌。下一步方向可能是使用更多元素來生成更多的網站樣本，包括網站圖片，下拉菜單和窗體，可參考啟動程序組件（https://getbootstrap.com/docs/4.0/components/buttons/）來獲得思路；

2. 在實際網站構建中，存在很多變化。創建一個能更好反映這種變化的訓練集，是提高生成效果的一種好方法，可以通過獲取更多網站的HTML/CSS代碼以及內容截圖來提高；

3. 手繪圖紙也存在很多CSS修改技巧無法捕捉到的變化。解決這個問題的一種好方法是使用生成對抗網絡GAN來創建更逼真的繪制網站圖像。

整合營銷服務商