此为历史版本和 IPFS 入口查阅区,回到作品页
jasonz
IPFS 指纹 这是什么

作品指纹

DAY3 — 開始寫程式吧,建立 monorepo

jasonz
·
·
monorepo是一種管理程式碼的方法,可以將所有的應用程式、API還有共用的函示庫都在同一個repo管理。

前幾篇講的大多都是想法與概念,都還沒有講到跟程式面有關的東西。接下來進入工程的世界了。

在聊到想法與構想的時候,可以非常天馬行空,什麼樣的問題跟什麼樣的解決方案都有可能,有可能很棒也有可能很爛。不過不管怎麼樣,有自己想過的問題才是自己的問題,都是很好的過程,最終的收穫只有自己才會知道。

但是進入工程端的世界之後,就比較沒有辦法天馬行空了,畢竟程式寫錯就是寫錯,沒有任何一點模糊或是想像的空間。甚至可以說,在寫side project的時候,會有一點先射箭再畫靶的情形。因為自己會的技術有限,想法可實現與否,最大的一部分限制就在自己會多少。

因此,加強技術能力不一定會成功,但是加強技術能力可以加大自己的做夢空間。那麼就開始加大自己的做夢空間吧

使用Nx建立monorepo

什麼是monorepo

monorepo是一種管理程式碼的方法,可以將所有的應用程式、API還有共用的函示庫都在同一個repo管理。在同一個專案管理的好處是,可以讓各個module或interface獨立出來,給不同的應用程式重複使用,而且不用再去管理從npm上面下載套件後的版本與相依的問題。可以大大減少管理的時間,專注在開發上面

什麼是Nx

Nx是一個建構monorepo的工具,他可以幫你建構與整合好整個monorepo的架構,讓你可以一鍵建立好整個架構,除此之外,還整合了熱門的測試工具,像是cypress、jest等等,以往要設定這些工具都還要繁複的設定步驟,現在完全零設定

開始建立monorepo

建立的指令很簡單,只要輸入:

npx create-nx-workspace

接下來nx cli 就會問你要建立什麼樣的專案,有各式各樣的框架可以選擇,像是Angular、React、express、nest等等

因為筆者熟悉的前端框架是Angular、後端框架是Nestjs,因此本系列文章會以這兩個框架作為示範,但是大多數就是講想法或概念而已,就算不懂也沒關係,可以用自己熟悉的框架去做就好

然後就會問你一些設定的問題,就選擇自己喜歡習慣的設定吧

完成之後,就可以打開vs code跑起來看看

分別啟動終端機個別輸入以下指令:

nx run api:serve // 啟動 nestjs 後端ng serve // 啟動 angular 前端

可以看到一下畫面:

打開 app.service.ts ,試著修改文字,看看是否有變化

import { Injectable } from '@nestjs/common';import { Message } from '@hello-nx/api-interfaces';
@Injectable()export class AppService {  getData(): Message {    return { message: 'Welcome to api!' }; // 試著修改文字  }}

將文字修改為:

{ message: '歡迎來到2021年鐵人賽' }

修改完之後儲存,再打開畫面

這樣就成功建立Nx專案囉,明天開始介紹什麼是Nx

CC BY-NC-ND 2.0 授权