建站
咨詢
售后
建站咨詢
新聞中心
嗨！這周我一直在寫一些 Javascript，和往常一樣，當(dāng)我開始一個(gè)新的前端項(xiàng)目時(shí)，我面臨的問(wèn)題是：我是否應(yīng)該使用構(gòu)建系統(tǒng)？
創(chuàng)新互聯(lián)公司是一家專注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),濱湖網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:濱湖等地區(qū)。濱湖做網(wǎng)站價(jià)格咨詢:13518219792
我想談?wù)剺?gòu)建系統(tǒng)對(duì)我有什么吸引力，為什么我（通常）仍然不使用它們，以及一些前端 Javascript 庫(kù)要求你使用構(gòu)建系統(tǒng)時(shí)，為什么我覺得這讓我感到沮喪。
我寫這篇文章是因?yàn)槲铱吹降拇蠖鄶?shù)關(guān)于 JS 的文章都假定你正在使用構(gòu)建系統(tǒng)，而對(duì)于像我這樣的人來(lái)說(shuō)，編寫非常簡(jiǎn)單的、不需要構(gòu)建系統(tǒng)的小型 Javascript 項(xiàng)目時(shí)，構(gòu)建系統(tǒng)可能反而添加了很多麻煩。
什么是構(gòu)建系統(tǒng)？
構(gòu)建系統(tǒng)的思路是，你有一堆 Javascript 或 Typescript 代碼，你想在把它放到你的網(wǎng)站上之前把它翻譯成不同的 Javascript 代碼。
構(gòu)建系統(tǒng)可以做很多有用的事情，比如：
- （出于效率的考慮）將 100 多個(gè) JS 文件合并成一個(gè)大的捆綁文件
- 將 Typescript 翻譯成 Javascript
- 對(duì) Typescript 進(jìn)行類型檢查
- 精簡(jiǎn)化
- 添加 Polyfills 以支持舊的瀏覽器
- 編譯 JSX
- 搖樹優(yōu)化Tree Shaking（刪除不使用的 JS 代碼以減少文件大?。?/li>
- 構(gòu)建 CSS（像 ??tailwind?? 那樣）
- 可能還有很多其他重要的事情
正因?yàn)槿绱耍绻憬裉煺跇?gòu)建一個(gè)復(fù)雜的前端項(xiàng)目，你可能會(huì)使用 Webpack、Rollup、Esbuild、Parcel 或 Vite 等構(gòu)建系統(tǒng)。
很多這些功能對(duì)我很有吸引力，我過(guò)去使用構(gòu)建系統(tǒng)也是出于這樣一些原因： 例如，??Mess With DNS?? 使用 Esbuild 來(lái)翻譯 Typescript，并將許多文件合并成一個(gè)大文件。
目標(biāo)：輕松地對(duì)舊的小網(wǎng)站進(jìn)行修改
我做了很多簡(jiǎn)單的小網(wǎng)站（??之一??、??之二??、??之三??、??之四??），我對(duì)它們的維護(hù)精力大約為 0，而且我改變它們的頻率很低。
我的目標(biāo)是，如果我有一個(gè) 3、5 年前做的網(wǎng)站，我希望能在 20 分鐘內(nèi)，
- 在一臺(tái)新的電腦上從 GitHub 獲取源代碼
- 做一些修改
- 把它放到互聯(lián)網(wǎng)上
但我對(duì)構(gòu)建系統(tǒng)（不僅僅是 Javascript 構(gòu)建系統(tǒng)！）的經(jīng)驗(yàn)是，如果你有一個(gè) 5 年歷史的網(wǎng)站，要重新構(gòu)建這個(gè)網(wǎng)站會(huì)非常痛苦。
因?yàn)槲业拇蠖鄶?shù)網(wǎng)站都很小，所以使用構(gòu)建系統(tǒng)的 優(yōu)勢(shì) 很小 —— 我并不真的需要 Typescript 或 JSX。我只要有一個(gè) 400 行的 ??script.js?? 文件就可以了。
示例：嘗試構(gòu)建 SQL 實(shí)驗(yàn)場(chǎng)
我的一個(gè)網(wǎng)站（??SQL 試驗(yàn)場(chǎng)??）使用了一個(gè)構(gòu)建系統(tǒng)（它使用 Vue）。我最后一次編輯該項(xiàng)目是在 2 年前，是在另一臺(tái)機(jī)器上。
讓我們看看我今天是否還能在我的機(jī)器上輕松地構(gòu)建它。首先，我們要運(yùn)行 ??npm install??。下面是我得到的輸出：
$ npm install
[lots of output redacted]
npm ERR! code 1
npm ERR! path /Users/bork/work/sql-playground.wizardzines.com/node_modules/grpc
npm ERR! command failed
npm ERR! command sh /var/folders/3z/g3qrs9s96mg6r4dmzryjn3mm0000gn/T/install-b52c96ad.sh
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/avl/avl.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_args.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_stack.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_stack_builder.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channel_trace.o
npm ERR! CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/channel/channelz.o
在構(gòu)建 ??grpc?? 時(shí)出現(xiàn)了某種錯(cuò)誤。沒問(wèn)題。反正我也不需要這個(gè)依賴關(guān)系，所以我可以花 5 分鐘把它拆下來(lái)重建?，F(xiàn)在我可以 ??npm install?? 了，一切正常。
現(xiàn)在讓我們?cè)囍鴺?gòu)建這個(gè)項(xiàng)目：
$ npm run build
? Building for production...Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:414:16)
at handleParseError (/Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:467:10)
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:499:5
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/webpack/lib/NormalModule.js:356:12
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at runSyncOrAsync (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
at iterateNormalLoaders (/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array.(/Users/bork/work/sql-playground.wizardzines.com/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/bork/work/sql-playground.wizardzines.com/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at /Users/bork/work/sql-playground.wizardzines.com/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9
??這個(gè) Stack Overflow 的答案?? 建議運(yùn)行 ??export NODE_OPTIONS=--openssl-legacy-provider?? 來(lái)解決這個(gè)錯(cuò)誤。
這很有效，最后我得以 ??npm run build?? 來(lái)構(gòu)建這個(gè)項(xiàng)目。
這其實(shí)并不壞（我只需要?jiǎng)h除一個(gè)依賴關(guān)系和傳遞一個(gè)略顯神秘的 Node 選項(xiàng)！），但我寧愿不被那些構(gòu)建錯(cuò)誤破壞。
對(duì)我來(lái)說(shuō)，對(duì)于小項(xiàng)目來(lái)說(shuō)，構(gòu)建系統(tǒng)并不值得
對(duì)我來(lái)說(shuō)，一個(gè)復(fù)雜的 Javascript 構(gòu)建系統(tǒng)對(duì)于 500 行的小項(xiàng)目來(lái)說(shuō)似乎并不值得 —— 它意味著放棄了在未來(lái)能夠輕松更新項(xiàng)目的能力，以換取一些相當(dāng)微小的好處。
Esbuild 似乎更穩(wěn)定一些
我想為 Esbuild 大聲叫好： 我 ??在 2021 年了解到 Esbuild??，并用于一個(gè)項(xiàng)目，到目前為止，它確實(shí)是一種更可靠的構(gòu)建 JS 項(xiàng)目的方式。
我剛剛嘗試在一臺(tái)新電腦上構(gòu)建一個(gè)我最后一次改動(dòng)在 8 個(gè)月前的 Esbuild 項(xiàng)目，結(jié)果成功了。但我不能肯定的說(shuō)，兩年后我是否還能輕松的建立那個(gè)項(xiàng)目。也許會(huì)的，我希望如此！
不使用構(gòu)建系統(tǒng)通常是很容易的
下面是 ??Nginx 實(shí)驗(yàn)場(chǎng)?? 代碼中導(dǎo)入所有庫(kù)的部分的樣子：
這個(gè)項(xiàng)目也在使用 Vue，但它只是用 ??