Compodoc 是一個依據你的Angular 專案自動產生網頁版本的文件工具。他會掃描你的專案內容自動產生一個文件資料夾並且產生一份漂亮的互動網頁檔案。
首先我們先到自己的專案底下透過 npm 或是 yarn 來安裝 compodoc。
yarn:
cloverhsc ~ /你的專案 > yarn add -D @compodoc/compodoc
npm:
cloverhsc ~ /你的專案 > npm install --save-dev @compodoc/compodoc
以上的方式是告知 yarn / npm 安裝 compodoc 到開發用軟體而非專案使用的library。
安裝完之後就會在 package.json 裡面看到 devDependencies 內有 @compodoc/compodoc 這個項目。
接著我們在 package.json 的 "scripts" 加入讓 compodoc 產生文件的指令：
"scripts": {
..........,
"compodoc": "npx compodoc -p src/tsconfig.app.json",
..........
}
這樣我們可以透過在命令列下 npm run compodoc 來產生文件檔。
cloverhsc ~ /你的專案> npm run compodoc
執行後會看到 compodoc 產生一個名為 " documentation" 的資料夾在你的專案底下。
我們會看見裡面是一堆 html 檔案所以本身可以直接透過瀏覽器打開來觀看文件，然而 compodoc 也提供一個即時的網頁 server 可以在 local 直接來預覽文件。
接著在命令列執行 npm run doc 就能看到 compodoc 建立一個 localhost:8080 的網頁 server 連結。透過瀏覽器直接開啟 localhost:8080 就能看到我們有專案的文件網站了。
可以透過 --theme [theme] 這個參數在產生文件的指令內做變換。
本身還有許多功能與參數可以調整與修改，更多的功能可以參考官方網站的 OPTIONS 章節。
END.
安裝方法：
官方安裝的方式有全域跟專案底下安裝，個人不是很愛隨便污染Global的環境所以會採用專案底下安裝方式來做使用。首先我們先到自己的專案底下透過 npm 或是 yarn 來安裝 compodoc。
yarn:
cloverhsc ~ /你的專案 > yarn add -D @compodoc/compodoc
npm:
cloverhsc ~ /你的專案 > npm install --save-dev @compodoc/compodoc
以上的方式是告知 yarn / npm 安裝 compodoc 到開發用軟體而非專案使用的library。
安裝完之後就會在 package.json 裡面看到 devDependencies 內有 @compodoc/compodoc 這個項目。
接著我們在 package.json 的 "scripts" 加入讓 compodoc 產生文件的指令：
"scripts": {
..........,
"compodoc": "npx compodoc -p src/tsconfig.app.json",
..........
}
這樣我們可以透過在命令列下 npm run compodoc 來產生文件檔。
cloverhsc ~ /你的專案> npm run compodoc
執行後會看到 compodoc 產生一個名為 " documentation" 的資料夾在你的專案底下。
我們會看見裡面是一堆 html 檔案所以本身可以直接透過瀏覽器打開來觀看文件，然而 compodoc 也提供一個即時的網頁 server 可以在 local 直接來預覽文件。
Run:
首先我們一樣在 package.json 裡面的 "scripts" 加入下面的指令
"scripts" : {
......,
"doc" : "compodoc -s",
......,
}
......,
"doc" : "compodoc -s",
......,
}
接著在命令列執行 npm run doc 就能看到 compodoc 建立一個 localhost:8080 的網頁 server 連結。透過瀏覽器直接開啟 localhost:8080 就能看到我們有專案的文件網站了。
題外話：
compodoc 有提供幾個內建的樣板可供選擇如果你覺得預設的樣板不好看的話(themes)。可以透過 --theme [theme] 這個參數在產生文件的指令內做變換。
本身還有許多功能與參數可以調整與修改，更多的功能可以參考官方網站的 OPTIONS 章節。
END.
留言
張貼留言