Ajar anda langkah demi langkah cara menggunakan projek TS Node.js dengan betul dan cepat!

Bagaimana untuk menggunakan projek TS Node.js dengan betul dan cepat? Artikel berikut akan mengajar anda cara menggunakan aplikasi TS Node.js dalam beberapa minit, saya harap ia akan membantu anda!

Sebagai pembangun timbunan penuh, adalah sangat menarik untuk mencipta projek Anda boleh mereka bentuk seni bina, sumbang saran dan membangunkan, tetapi selepas pembangunan selesai, kami telah melakukannya untuk menggunakan atau melepaskan aplikasi. Jadi bagaimana untuk menggunakan projek TS Node.js dengan betul dan cepat Mari selesaikan hari ini? [Pembelajaran yang disyorkan: "tutorial nodejs"]

Buat aplikasi TS Node.js

Jika anda sudah biasa membuat TS Node Projek .js , anda boleh melompat terus ke bahagian "Kerahkan dan terbitkan aplikasi"

Mulakan projek Node.js:

Dalam pasukan kami, kami sangat menyukai TS dan gunakannya dalam semua projek baharu kami TS digunakan dalam semua projek, jadi mencipta projek TS bukanlah baharu.

Mari kita mulakan dari yang paling asas:

• npm init Mulakan projek Node.js, gunakan parameter -y untuk melangkau langkah demi- dengan cepat konfigurasi langkah

• npm install express @types/express Pasang kebergantungan ekspres dan fail jenis ekspres untuk pembangunan TS

• npm install typescript --save-dev Pasang skrip taip sebagai kebergantungan pembangunan

mkdir my-app && cd my-app
npm init -y
npm install express @types/express --save
npm install typescript --save-dev

Konfigurasi TS

• npx tsc --init akan mencipta fail konfigurasi lalai skrip taip tsconfig.json
• declaration digunakan untuk menentukan sama ada untuk menjana fail *.d.ts yang sepadan selepas kompilasi selesai ialah lokasi fail yang disusun. Letakkan fail sumber ts di lokasi yang sama
• outdirJalankan arahan

Ubah suai konfigurasi berikut

 npx tsc --init

Buat fail kemasukan projek

"compilerOptions": {
  ...
  "outDir": "dist", // 编译后输出目录
  "declaration": true // 生成 d.ts
}

Cipta fail

server.tsSelepas melengkapkan langkah di atas, struktur direktori fail kami adalah seperti berikut

import express from 'express'
const app = express()
const PORT = 3000

app.use(express.json())

app.get('/', (req, res) => {
  res.send(‘Hello World!’)
})

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`)
})

Kompilasi TS

.
├── node_modules
├── package-lock.json
├── package.json
├── server.ts
└── tsconfig.json

Langkah kami seterusnya ialah membina dan menggunakan aplikasi TS Node.js kami Memandangkan dalam persekitaran pengeluaran, kami tidak menjalankan versi TS, tetapi JS yang disusun. Seterusnya kami menyusun projek

Ubah suai fail package.json dan tambah arahan berikut

Projek kami akan disusun mengikut konfigurasi tsconfig kami. json dan output Pergi ke direktori yang ditentukan

• npm run tsc

akan menjalankan fail JS terkumpul kami

• npm run start:prod

dan kemudian mengujinya secara setempat

"scripts": {
  "tsc": "tsc",
  "start:prod": "node dist/server.js"
}

Akses http://localhost:3000/ melalui penyemak imbas, akses berjaya, kemudian kami menggunakan dan menerbitkan aplikasi kami

npm run tsc
npm run start:prod

# 服务启动成功，运行端口：3000

Aplikasi Deployment Publish

Di sini kami menggunakan dua kaedah untuk mengedarkan dan menggunakan projek TS yang disusun ke pelbagai persekitaran

Dalam bentuk pakej pergantungan npm

Mod kontena Docker
• Borang pakej pergantungan NPM

cangkuk kitaran hayat NPM

Beberapa kehidupan istimewa cangkuk berkala akan dicetuskan apabila operasi yang ditentukan dicetuskan Di sini kita akan menggunakan cangkuk "sediakan", yang akan dicetuskan sekali sebelum melaksanakan perintah penerbitan npm untuk diterbitkan ke NPM. Jadi kita boleh menyusun aplikasi TS pada masa ini.

Tentukan fail keluaran

Melalui medan "fail" kita boleh menentukan fail yang perlu disertakan semasa menerbitkan pakej NPM Jika atribut ini ditinggalkan, lalai akan menjadi ["*" ], semua fail akan dimuat naik.

Berikut ialah package.json yang diubah suai

npm publish

"name": "my-app-xiaoshuai", // 我们发布到NPM上的名字
"main": "dist/server.js", // 修改入口文件地址
"types": "dist/server.d.ts", // 指定TS类型文件
"files": [
  "dist",
  "package.json",
  "package-lock.json",
  "README.md"
],
"scripts": {
  "tsc": "tsc",
  "prepare": "npm run tsc"  // 编辑typescript
}

Selepas mengubah suai konfigurasi package.json, kami menjalankan npm publish Command untuk menerbitkan permohonan kami kepada NPM

Output

npm publish

Selepas berjaya menerbitkan, anda dapat melihat bahawa terdapat tambahan pada Pakej npmjs

my-app-xiaoshuai

Docker Container Way

Untuk menerbitkan aplikasi TS Node.js kami sebagai bekas, kami perlu menambahkannya pada akar projek direktori Cipta fail konfigurasi docker Dockerfile.

Mari tulis Fail Docker langkah demi langkah

Salin fail yang disusun ke dalam bekas

• Salin package.json dan pakej -lock.json ke dalam bekas

• Gunakan
untuk memasang dependencies

• npm install

  Gunakan
untuk menjalankan aplikasi kami

# Node 版本
FROM node:14.18.0-alpine

ARG NODE_ENV=production
ENV NODE_ENV $NODE_ENV

COPY ./dist /dist
COPY ./package.json /package.json
COPY ./package-lock.json /package-lock.json

RUN NODE_ENV=$NODE_ENV npm install

EXPOSE 3000

CMD ["node", "dist/server.js"]

现在我们可以在根目录中构建docker镜像，运行 docker build --tag my-app:test . 命令

docker build --tag my-app:test .

成功后输出如下

接着我们运行容器，使用docker run -p 3000:3000 -it my-app:test命令来运行我们的应用，可以看到程序成功运行在3000端口

docker run -p 3000:3000 -it my-app:test
# 服务启动成功，运行端口：3000

通过浏览器访问http://localhost:3000/，访问成功

源码

https://github.com/cmdfas/ts-node-express-deploy

总结

今天我们介绍了创建TS Node.js项目和部署它的基础知识，希望对大家有所帮助，能够用在现在或未来的项目中。

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menggunakan projek TS Node.js dengan betul dan cepat!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!