NestJS 項(xiàng)目打包的實(shí)現(xiàn)步驟
最近在用nest做一些工具,開發(fā)階段挺好用,等到打包時(shí)遇到了各種各樣的問題,在這里簡單總結(jié)下。
一、nest build
如果使用nest build進(jìn)行打包,你將會得到一份和原目錄相同的目錄結(jié)構(gòu)輸出。
為什么?
因?yàn)镹estJS CLI僅做如下處理:
- 讀取配置文件:讀取nest-cli.json等配置文件,確定構(gòu)建選項(xiàng)和輸出目錄。
- TypeScript編譯
- 部分文件處理:復(fù)制靜態(tài)資源,處理路徑映射
- 優(yōu)化操作:代碼壓縮 以及生成source map
可以看到,NestJS CLI 并沒有像webpack一樣,將不同文件打包成一個(gè),而是保留了原有目錄結(jié)構(gòu)。
二、關(guān)于.map文件
上面我們提到,會生成.map文件。有些同學(xué)可能會有疑問,.map 不是在瀏覽器中使用的么?服務(wù)端項(xiàng)目為什么還需要.map文件?這就要講到.map文件的使用場景:
錯(cuò)誤調(diào)試與堆棧跟蹤
當(dāng)服務(wù)端運(yùn)行時(shí)出現(xiàn)錯(cuò)誤,Node.js會生成錯(cuò)誤堆棧信息。如果沒有Source map,錯(cuò)誤信息會指向編譯后的JavaScript代碼的行號,而不是原始的TypeScript代碼。這使得定位和修復(fù)問題變得非常困難。
性能分析
在進(jìn)行性能分析時(shí),source map可以幫助開發(fā)者識別哪些原始TypeScript代碼段在運(yùn)行時(shí)消耗了最多資源。這對于優(yōu)化關(guān)鍵路徑和提高應(yīng)用性能至關(guān)重要。
- 開發(fā)體驗(yàn)優(yōu)化
在開發(fā)環(huán)境中,使用source map可以獲得更好的開發(fā)體驗(yàn)。例如,當(dāng)使用Node.js的調(diào)試器或日志記錄時(shí),可以直接看到和引用原始的TypeScript代碼,而不是編譯后的JavaScript代碼。
- 日志記錄增強(qiáng)
在日志系統(tǒng)中,可以通過source map將日志中記錄的代碼位置轉(zhuǎn)換回原始TypeScript文件位置,使日志信息更有意義和可操作。
三、為什么不將依賴包打包進(jìn)最終結(jié)果中?
nest項(xiàng)目打包,建議采用分離依賴的方式,即打包后單獨(dú)安裝依賴。
優(yōu)勢:
- 鏡像體積更?。ㄈ绻捎胐ocker方式的話):只包含編譯后的代碼
- 緩存友好:Docker構(gòu)建時(shí)可以分層緩存
- 部署靈活:可以在目標(biāo)環(huán)境安裝特定版本的依賴
- 標(biāo)準(zhǔn)實(shí)踐:符合Node.js生態(tài)的常見做法
- 體積臃腫:node_modules會非常大
- 路徑問題:可能出現(xiàn)模塊解析錯(cuò)誤
- 平臺兼容性:native依賴可能不兼容目標(biāo)平臺
webpack打包示例:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/main.ts',// 入口問啊進(jìn)
target: 'node',
mode: process.env.NODE_ENV || 'production',
output: {
path: path.resolve(__dirname, 'dist'), //輸出目錄
filename: 'bundle.js',// 輸出結(jié)果
},
resolve: {
extensions: ['.ts', '.js'],// 支持的文件擴(kuò)展名
plugins: [
new TsconfigPathsPlugin({// 支持tsconfig路徑映射
configFile: './tsconfig.json',
}),
],
},
module: {
rules: [
{
test: /\.ts$/, // 處理TypeScript文件
use: {
loader: 'ts-loader',
options: {
transpileOnly: true, // 只編譯,不做類型檢查
},
},
exclude: /node_modules/, //排除 node_modules
},
],
},
externals: [nodeExternals()], // 排除所有 node_modules 依賴;不打包 [node_modules](),運(yùn)行時(shí)從外部加載,這就是為什么你需要在部署環(huán)境安裝依賴的原因
plugins: [
new CleanWebpackPlugin(), // 清理dist目錄
new ForkTsCheckerWebpackPlugin(),// 在單獨(dú)進(jìn)程中進(jìn)行類型檢查
new CopyPlugin({ //將靜態(tài)文件復(fù)制到dist目錄
patterns: [
{
from: path.resolve(__dirname, 'public'),
to: path.resolve(__dirname, 'dist/public'),
},
{
from: path.resolve(__dirname, 'package.json'),
to: path.resolve(__dirname, 'dist/package.json'),
},
{
from: path.resolve(__dirname, '.env'),
to: path.resolve(__dirname, 'dist'),
},
],
}),
],
optimization: {
minimize: process.env.NODE_ENV === 'production',
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: process.env.NODE_ENV === 'production',// 生產(chǎn)環(huán)境移除 console
},
},
}),
],
},
devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval-cheap-module-source-map',
};
四、為什么靜態(tài)文件沒有打包到最終的boundle.js中
- 在Node.js應(yīng)用中,靜態(tài)文件和配置文件通常保持獨(dú)立,便于在運(yùn)行時(shí)直接讀取或修改,而不是打包進(jìn)最終結(jié)果中
- webpack默認(rèn)只會打包通過import或require引入的JavaScript/TypeScript模塊。
- .env問啊進(jìn)包含環(huán)境變量,通常需要在運(yùn)行時(shí)讀取,保持其獨(dú)立文件形式更靈活;public目錄下的文件通常是靜態(tài)資源,需要通過路徑訪問。
- 如果需要使用,可以在webpack打包時(shí),將.env文件等復(fù)制到dist目錄下。
五、fetch api
如果你在代碼中使用了fetch api,開發(fā)環(huán)境沒有問題,但是打包后將報(bào)錯(cuò)fetch is not defined。因?yàn)镹ode18以下版本中,默認(rèn)不包含瀏覽器的原生fetch API,如需使用,需要引入node-fetch。18以上就可以正常使用了。
到此這篇關(guān)于NestJS 項(xiàng)目打包的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)NestJS 項(xiàng)目打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)為動態(tài)添加的元素增加事件功能示例【基于事件委托】
這篇文章主要介紹了JS實(shí)現(xiàn)為動態(tài)添加的元素增加事件功能,結(jié)合實(shí)例形式分析了javascript基于事件委托實(shí)現(xiàn)針對動態(tài)添加的元素增加事件的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼2009-12-12
JavaScript隱式類型轉(zhuǎn)換例子總結(jié)
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換例子總結(jié),熟練掌握類型轉(zhuǎn)換,理解其中的規(guī)律??梢宰屇愕拇a更簡潔更安全,下文圍繞主題JS隱式轉(zhuǎn)換,需要的朋友可以參考一下2022-08-08
前端技術(shù)選型之該選擇JavaScript還是TypeScript詳析
TypeScript(TS)和JavaScript(JS)是目前項(xiàng)目開發(fā)中比較流行的兩種腳本編程語言,其中TypeScript是JavaScript的超集,最終通過工具編譯生成JavaScript,這篇文章主要介紹了前端技術(shù)選型之該選擇JavaScript還是TypeScript的相關(guān)資料,需要的朋友可以參考下2025-07-07
解決layui中table異步數(shù)據(jù)請求不支持自定義返回?cái)?shù)據(jù)格式的問題
今天小編就為大家分享一篇解決layui中table異步數(shù)據(jù)請求不支持自定義返回?cái)?shù)據(jù)格式的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript使用readAsDataUrl方法預(yù)覽圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript使用readAsDataUrl方法預(yù)覽圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05

