node typescript tutorial
1.0.0
มาจาก GitHub? ประสบการณ์การรับชมที่ดีขึ้นของบทช่วยสอนนี้สามารถมีได้ที่เว็บไซต์ด้านล่าง: https://pokedpeter.dev
บทช่วยสอนนี้จะแสดงวิธีการสร้างโครงการ Node (JavaScript) Barebones (JavaScript) ตั้งแต่เริ่มต้นด้วยสารพัดต่อไปนี้:
สิ่งที่ต้องทำล่วงหน้า:
มาตั้งค่าโครงการโหนดเปล่า
สร้างโครงการโหนดของเรา สามารถข้ามตัวเลือกพร้อมท์ทั้งหมดได้
mkdir project
cd project
npm init ไฟล์ที่เรียกว่า package.json จะถูกตั้งค่าด้วยตัวเลือกที่คุณเลือก คุณสามารถข้ามตัวเลือกอินเทอร์เฟซและไปกับค่าเริ่มต้นโดยเรียกใช้ npm init -y
{
"name" : " project " ,
"version" : " 1.0.0 " ,
"description" : " " ,
"main" : " index.js " ,
"scripts" : {
"test" : " echo " Error: no test specified " && exit 1 "
},
"author" : " " ,
"license" : " ISC "
}สคริปต์ปฏิบัติการหลักจะไม่ถูกสร้างขึ้นโดยอัตโนมัติ สร้างมัน
touch index.js ใส่สิ่งพื้นฐานใน index.js เพื่อการทดสอบ
console . log ( 'Hello World' ) ;ทดสอบจาก CLI:
node index.js
ซึ่งให้เอาต์พุตคอนโซลบางอย่าง:
Hello World
JavaScript ไม่ได้มาพร้อมกับไลบรารีมาตรฐานใด ๆ ในตัว วิธีที่แนะนำคือการติดตั้งแพ็คเกจ NPM ลองตัวอย่างกันเถอะ เราจะติดตั้ง Lodash ซึ่งเป็นห้องสมุดที่เป็นที่นิยมของระบบสาธารณูปโภคที่มีประโยชน์
npm install lodash
นี่คือผลลัพธ์:
added 1 package, and audited 4 packages in 987ms
found 0 vulnerabilities
ตอนนี้เราได้เข้าร่วม Lodash ตอนนี้เราสามารถใช้มันได้ในแอพของเรา เปิด index.js อีกครั้งและอัปเดตเพื่อจับคู่:
const _ = require('lodash);
console.log(_.snakeCase('Hello World'));
เรียกใช้แล้วคุณจะเห็นผลลัพธ์ต่อไปนี้:
hello_world
ดูไฟล์ package.json อีกครั้งและสังเกตเห็นส่วน dependencies ใหม่ด้วยรายการ Lodash:
"dependencies" : {
"lodash" : " ^4.17.21 "
}เคล็ดลับ
หากต้องการดูเนื้อหาไฟล์อย่างรวดเร็วจาก CLI ให้พิมพ์: cat package.json
ดูไฟล์โครงการของคุณและสังเกตเห็นโฟลเดอร์ node_modules ถูกสร้างขึ้น:
$ ls -l
index.js
node_modules
package-lock.json
package.jsonโฟลเดอร์นี้เป็นที่เก็บการพึ่งพาของคุณ ลองตรวจดู:
$ ls node_modules
@types lodash typescriptให้เพิ่ม typescript ในโครงการโหนด Barebones ของเรา
ติดตั้งการพึ่งพา TypeScript เป็น dev devedency การพึ่งพา --save-dev
npm install --save-dev typescriptการติดตั้งคำจำกัดความประเภท typescript สำหรับโหนด:
npm install --save-dev @types/nodeเคล็ดลับ
ติด npm install --save-dev typescript @types/node แพ็คเกจหลายแพ็คเกจในครั้งเดียวโดยรวมเข้าด้วย
ดูการพึ่งพาใน package.json นี่คือส่วนที่เกี่ยวข้อง:
{
"devDependencies" : {
"@types/node" : " ^20.4.9 " ,
"typescript" : " ^5.1.6 "
}
}Initialise typeScript โดยเรียกใช้คำสั่งต่อไปนี้ทุกที่ภายในโครงการของคุณ
npx tsc --init สิ่งนี้จะสร้างไฟล์ tsconfig.json พร้อมการตั้งค่าเริ่มต้น:
Created a new tsconfig.json with:
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
เราใช้ npx ซึ่งดำเนินการไบนารีที่ติดตั้งในเครื่องซึ่งติดตั้งผ่าน package.json
คำเตือน
คู่มือการติดตั้งบางตัวจะแนะนำให้ติดตั้ง typescript ทั่วโลก sudo npm install -g typescript ฉันขอแนะนำให้ติดตั้งเวอร์ชันท้องถิ่น (เช่นภายในโฟลเดอร์โครงการของคุณ)
เวอร์ชันทั่วโลกอาจแตกต่างจากเวอร์ชันท้องถิ่นที่ติดตั้งสำหรับโครงการของคุณ Running tsc ใช้เวอร์ชันทั่วโลกโดยตรง เมื่อ tsc ทำงานเป็นส่วนหนึ่งของ NPM ในโครงการของคุณจะใช้เวอร์ชันท้องถิ่น
มีหลายตัวเลือกที่ตั้งค่าโดยค่าเริ่มต้นใน tsconfig.json มีตัวเลือกที่แสดงความคิดเห็นมากมาย - ไม่แสดงด้านล่าง
{
"compilerOptions" : {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Basic Options */
"target" : " es5 " , /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module" : " commonjs " , /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
/* Strict Type-Checking Options */
"strict" : true , /* Enable all strict type-checking options. */
/* Module Resolution Options */
"esModuleInterop" : true , /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
/* Advanced Options */
"skipLibCheck" : true , /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames" : true /* Disallow inconsistently-cased references to the same file. */
}
}บางส่วนแนะนำให้ปรับแต่งเป็นค่าเริ่มต้น:
"target" : " es2015 " , // I'd recommend es2015 at a minimum. es5 is ancient.
"outDir" : " build " , // Keep our compiled javascript in the build directory
"rootDir" : " src " , // Keep our source code in a separate directory
"noImplicitAny" : true , // We're using Typescript yeah? And not adding Typescript to an existing project. Enforce good habits from the start.
"lib" : [ " es2020 " ], // Setting this excludes DOM typings as we are using Node. Otherwise you'll run into errors declaring variables like 'name' เกี่ยวกับ target โดยทั่วไปแล้วโหนดรุ่นใหม่จะรองรับคุณสมบัติ ECMA รุ่นใหม่ เว็บไซต์ด้านล่างเป็นแหล่งข้อมูลที่ยอดเยี่ยมในการดูว่าคุณลักษณะ ECMA มีให้บริการสำหรับโหนดแต่ละรุ่น:
https://node.green/
ไม่จำเป็นต้องใช้ index.js อีกต่อไป:
rm index.jsตั้งค่าซอร์สโค้ดโครงการของเรา:
mkdir src
cd src
touch index.ts เพิ่มบางสิ่งบางอย่างพื้นฐานไปยัง index.ts เพื่อทดสอบ:
console . log ( 'Hello typescript!' ) ;รวบรวมโครงการ Barebones ของเรา
npx tsc เอาต์พุตที่รวบรวมได้เช่นเดียวกับ JavaScript สามารถพบได้ในไดเรกทอรี /build มันจะมี index.js มิเรอร์ src/index.ts ของเรา
เนื้อหาของ index.js:
"use strict" ;
console . log ( 'Hello World!' ) ;ตอนนี้คุณพร้อมที่จะสร้างโครงการ JavaScript ด้วย TypeScript!
จนกระทั่งเมื่อไม่นานมานี้ Tslint เป็น Linter Code Type-type-typen แต่ตอนนี้มันเลิกใช้แล้วเนื่องจากโครงการได้ถูกรวมเข้าเป็น ESLINT นี่คือโฮมเพจอย่างเป็นทางการ:
เว็บไซต์:
https://eslint.org
ไซต์ GitHub:
https://github.com/typescript-eslint/typescript-eslint
ติดตั้ง ESLINT (เป็นการพึ่งพา dev แน่นอน)
npm install --save-dev eslintมาตั้งค่าการกำหนดค่าผ้าสำลีของเราโดยใช้คำสั่ง init ของ ESLINT:
npx eslint --initทำตามพรอมต์ เรากำลังใช้โหนดดังนั้นจึงไม่จำเป็นต้องรองรับเบราว์เซอร์ มันจะถามคุณว่าคุณต้องการติดตั้งปลั๊กอิน typescript ที่ขึ้นอยู่กับหรือไม่ ไปข้างหน้าและทำอย่างนั้น
✔ How would you like to use ESLint ? · problems
✔ What type of modules does your project use ? · esm
✔ Which framework does your project use ? · none
✔ Does your project use TypeScript ? · No / Yes
✔ Where does your code run ? · node
✔ What format do you want your config file to be in ? · JSON
The config that you ' ve selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
Successfully created .eslintrc.json file in /your/projectข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่าผ้าสำลีด้านล่าง:
https://eslint.org/docs/user-guide/configuring
การใช้ตัวเลือกที่เลือกไว้ข้างต้นไฟล์. eslintrc.json ของเรามีลักษณะเช่นนี้:
{
"env" : {
"es2020" : true ,
"node" : true
},
"extends" : [
" eslint:recommended " ,
" plugin:@typescript-eslint/recommended "
],
"parser" : " @typescript-eslint/parser " ,
"parserOptions" : {
"ecmaVersion" : 11 ,
"sourceType" : " module "
},
"plugins" : [
" @typescript-eslint "
],
"rules" : {
}
}คุณอาจสังเกตเห็นคำถามหนึ่งในระหว่างกระบวนการเริ่มต้น ESLINT คือสิ่งนี้:
? How would you like to use ESLint ? …
To check syntax only
▸ To check syntax and find problems
To check syntax, find problems, and enforce code styleตัวเลือกสุดท้ายยังบังคับใช้สไตล์รหัส หากคุณเลือกตัวเลือกนั้นคำถามติดตามจะเป็น:
? How would you like to define a style for your project ? …
▸ Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)หากคุณเลือกที่จะใช้คู่มือสไตล์ยอดนิยมคุณจะมีทางเลือกจากสิ่งต่อไปนี้:
? Which style guide do you want to follow ? …
▸ Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xoฉันขอแนะนำให้ค้นคว้าคำแนะนำสไตล์ข้างต้นและไปกับหนึ่งที่สอดคล้องกับความชอบของคุณ
ต่อไปเราจะสร้างไฟล์กำหนดค่าอื่นในข้อความคำฟ้องเพื่อให้เราไม่รวมไฟล์และไดเรกทอรีจากผ้าสำลี:
touch .eslintignoreและเพิ่มเนื้อหาต่อไปนี้ลงในไฟล์:
node_modules
build
เราไม่ต้องการผ้าสำลีในรหัส JavaScript ที่รวบรวมไว้ของเรา
โดยค่าเริ่มต้นกฎมาตรฐานจะถูกเปิดใช้งาน ดูรายการที่ทำเครื่องหมายไว้ในรายการที่:
https://eslint.org/docs/rules/
ตัวอย่างเช่นลองทำลายกฎ no-extra-semi
ลองเพิ่มกึ่งอวโลนไปที่จุดสิ้นสุดของบรรทัดใน index.ts และทำการตรวจสอบผ้าสำลีเพื่อดูข้อผิดพลาด:
console . log ( 'Hello typescript' ) ; ;แล้ว:
npx eslint srcซึ่งส่งผลให้:
1:34 error Unnecessary semicolon @typescript-eslint/no-extra-semi
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
คำเตือน
เมื่อติดตั้งตัวเลือก AirBNB ฉันสังเกตเห็นว่า ESLINT จำเป็นต้องมีการขยายไฟล์. TTS:
npx eslint src --ext .ts สร้างสคริปต์สำหรับสิ่งนี้ใน package.json เพื่อให้เราสามารถเรียกได้อย่างสะดวก:
"scripts" : {
...
"lint" : " eslint src --ext .ts "
},ใช้ได้เฉพาะเมื่ออยู่ใน NPM <V7 แต่โปรดทราบว่าหากคุณเรียกใช้สคริปต์ NPM และปัญหาที่พบคุณจะเห็นข้อความแสดงข้อผิดพลาด NPM ต่อไปนี้ต่อท้ายด้านล่าง ESLINT OUTPUT:
> eslint src --ext .ts
/home/user/dev/test/src/index.ts
1:1 warning Unexpected console statement no-console
1:21 error Missing whitespace after semicolon semi-spacing
1:22 error Unnecessary semicolon no-extra-semi
✖ 3 problems (2 errors, 1 warning)
2 errors and 0 warnings potentially fixable with the ` --fix ` option.
npm ERR ! code ELIFECYCLE
npm ERR ! errno 1
npm ERR ! [email protected] lint: ` eslint src --ext .ts `
npm ERR ! Exit status 1
npm ERR !
npm ERR ! Failed at the [email protected] lint script.
npm ERR ! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR ! A complete log of this run can be found in:
npm ERR ! /home/user/.npm/_logs/2021-08-18T15_27_55_318Z-debug.logฉันไม่เห็นข้อผิดพลาด NPM เมื่ออยู่ใน NPM V7 (เช่นเมื่อใช้โหนด 16.6.2)
แต่ละกฎสามารถเป็นหนึ่งในสามรัฐ:
| โหมดกฎ | คำอธิบาย |
|---|---|
| 0 หรือ "ปิด" | ปิดใช้งานกฎ |
| 1 หรือ "เตือน" | คำเตือน Linter จะไม่ล้มเหลว |
| 2 หรือ "ข้อผิดพลาด" | ข้อผิดพลาด Linter จะล้มเหลว |
สามารถเพิ่มกฎเป็นคีย์ไปยังวัตถุกฎในไฟล์ config lint .eslintrc.json:
{
"root" : true ,
"parser" : " @typescript-eslint/parser " ,
"plugins" : [ ... ],
"extends" : [ ... ],
"rules" : {
..your rules go here..
}
}ค้นหากฎที่ eslint.org:
https://eslint.org/docs/rules/
ลองทดสอบกฎโวหารที่มีชื่อว่า 'Comma-Dangle' เราต้องการเตือนผู้ใช้ว่าอาร์เรย์ที่มีหลายบรรทัดไม่มีเครื่องหมายจุลภาคในรายการสุดท้าย
เพิ่มกฎ:
"rules" : {
"comma-dangle" : [
" warn " , {
"arrays" : " always-multiline "
}
]
}อ่านรายละเอียดกฎบนเว็บไซต์ อนุญาตให้ปรับแต่งได้เล็กน้อยสำหรับกฎหลายข้อ เราต้องการครอบคลุมการบังคับใช้เครื่องหมายจุลภาคในทุกสถานการณ์ในตัวอย่างนี้
เปลี่ยน index.ts ด้วยรหัสต่อไปนี้:
const movies = [
'Lord of the Flies' ,
'Battle Royale'
] ;
movies . pop ( ) ;เรียกใช้ linter:
npx eslint srcตอนนี้เราควรเห็นคำเตือนต่อไปนี้:
3:18 warning Missing trailing comma comma-dangle
✖ 1 problem (0 errors, 1 warning)
0 errors and 1 warning potentially fixable with the ` --fix ` option. หมายเหตุในผลลัพธ์มีตัวเลือกในการแก้ไขปัญหา ลองเรียกใช้ Linter ด้วยตัวเลือก --fix :
npx eslint --fix src ไม่มีผลลัพธ์จาก Linter ในครั้งนี้และหากเราตรวจสอบ index.ts เราจะเห็นว่ามีการเพิ่มเครื่องหมายจุลภาคที่ห้อยลงโดยอัตโนมัติ:
const movies = [
'Lord of the Flies' ,
'Battle Royale' , // <-- dangling comma added
] ;
movies . pop ( ) ; เราจะใช้รหัสฟอร์แมตที่สวยงามกว่า มันเป็นรูปแบบรหัสที่มีความคิดเห็นที่รองรับหลายภาษารวมถึง typeScript, JavaScript และรูปแบบอื่น ๆ ที่คุณอาจใช้สำหรับการกำหนดค่าเช่น JSON และ YAML
https://prettier.io
หรือคุณสามารถยึดติดกับ ESLINT เพื่อจัดรูปแบบรหัสของคุณ Prettier แตกต่างกันไปในนั้นไม่ได้ปรับเปลี่ยนรหัสของคุณเว้นแต่คุณจะตั้งหนึ่งในตัวเลือกเล็ก ๆ น้อย ๆ
ติดตั้งโมดูล:
npm install --save-dev prettierสร้างไฟล์กำหนดค่า สิ่งนี้ช่วยให้บรรณาธิการและเครื่องมืออื่น ๆ รู้ว่าคุณกำลังใช้ Prettier:
echo {} > .prettierrc.jsonคุณอาจไม่จำเป็นต้องเพิ่มตัวเลือกใด ๆ ในไฟล์กำหนดค่าเนื่องจากส่วนใหญ่จะเกี่ยวข้องกับการแปลงรหัสของคุณ ปล่อยให้ดีที่สุดไปยัง ESLINT และปล่อยให้การจัดรูปแบบที่ดีขึ้น
สร้างไฟล์ที่ไม่สนใจ สิ่งนี้ช่วยให้ CLI และบรรณาธิการที่สวยกว่ารู้ว่าไฟล์ใดที่จะแยกออกจากการจัดรูปแบบ
touch .prettierignore เพิ่มบรรทัดต่อไปนี้ลงใน .prettierignore :
node_modules
buildทดสอบสวยขึ้นด้วยคำสั่งต่อไปนี้ มันจะไม่ทับอะไรเพียงแค่ส่งออกรหัสที่จัดรูปแบบ:
npx prettier srcขึ้นอยู่กับการเปลี่ยนแปลงครั้งสุดท้ายของเราเป็น index.ts ผลลัพธ์จะเป็น:
const movies = [ "Lord of the Flies" , "Battle Royale" ] ;
movies . pop ( ) ;เราจะเห็นได้ว่าอาร์เรย์หลายบรรทัดได้ถูกจัดรูปแบบเป็นบรรทัดเดียว
เขียนการเปลี่ยนแปลงเป็นไฟล์โดยทำซ้ำคำสั่งด้วยตัวเลือก --write :
npx prettier --write srcสิ่งนี้จะแสดงรายการไฟล์ที่ได้รับการจัดรูปแบบ:
src/index.ts 279msเนื่องจากทั้ง ESLINT และ PRETTIER สามารถจัดรูปแบบรหัสคุณสามารถคาดหวังความขัดแย้งบางอย่างที่จะเกิดขึ้น Prettier ได้สร้างกฎโดยเฉพาะสำหรับ ESLINT โดยทั่วไปจะปิดใช้งานกฎใด ๆ ที่ไม่จำเป็นหรือขัดแย้งกันเมื่อรวมกับ Prettier
อันแรกคือ eslint-config-prettier :
https://github.com/prettier/eslint-config-prettier
การกำหนดค่านี้จะปิดกฎทั้งหมดที่ไม่จำเป็นหรือขัดแย้งกับ Prettier ติดตั้งด้วยคำสั่งต่อไปนี้:
npm install --save-dev eslint-config-prettier จากนั้นเพิ่มลงในบรรทัดสุดท้ายของส่วน extends ของคุณในการกำหนดค่า ESLINT, .eslintrc.json :
{
"extends" : [
"eslint:recommended" ,
"plugin:@typescript-eslint/recommended" ,
"plugin:@typescript-eslint/eslint-recommended" ,
"prettier" // <-- Add this
] ,
}คุณสามารถเรียกใช้คำสั่งต่อไปนี้ในไฟล์ใด ๆ เพื่อตรวจสอบว่าไม่มีความขัดแย้งระหว่าง ESLINT และ PRETTIER:
npx eslint-config-prettier src/index.tsหากทุกอย่างเป็นไปด้วยดีคุณควรได้รับการตอบสนองต่อไปนี้:
No rules that are unnecessary or conflict with Prettier were found. ถัดไปที่จะติดตั้งคือ eslint-plugin-prettier :
https://github.com/prettier/eslint-plugin-prettier
ทำงานได้ดีกว่าเป็นกฎ ESLINT และรายงานความแตกต่างเป็นปัญหา ESLINT ของแต่ละบุคคล ติดตั้งด้วยคำสั่งต่อไปนี้:
npm install --save-dev eslint-plugin-prettier จากนั้นอัปเดตไฟล์ .eslintrc.json ของคุณดังนี้:
{
"plugins" : [ " prettier " ],
"rules" : {
"prettier/prettier" : " error "
}
}ค้นหาปลั๊กอินด้านล่าง:
ESLint - โดย Dirk Baeumer
ค้นหาปลั๊กอินด้านล่าง:
Prettier - Code formatter - โดย Prettier
กด Ctrl + Shift + I เพื่อจัดรูปแบบรหัส คุณจะได้รับแจ้งให้เลือก Formatter เริ่มต้น เลือก Prettier เป็นค่าเริ่มต้นของคุณ
ค้นหาปลั๊กอินด้านล่าง:
Prettier ESLint - โดย Rebecca Vest
สคริปต์เหล่านี้ได้รับการปรับให้เหมาะกับโครงการ TypeScript ของเรา เรากำลังตรวจสอบไฟล์. TT เท่านั้น
เพิ่มคำสั่งด้านล่างลงในส่วน scripts ของ package.json ของคุณ json
"start:dev" : " nodemon " "lint" : " eslint --ext .ts src "
"lint-fix" : " eslint --fix --ext .ts src " "pretty" : " prettier --write 'src/**/*.ts' " Curveball เป็นกรอบขนาดเล็กสำหรับการสร้าง APIs ในโหนด มันถูกสร้างขึ้นจากพื้นดินด้วยการสนับสนุนสำหรับ TypeScript ซึ่งตรงข้ามกับ KOA รุ่นก่อนที่ได้รับความนิยมมากขึ้น
https://curveballjs.org/
ติดตั้ง:
npm install @curveball/core คัดลอกตัวอย่างจากเว็บไซต์ไปยัง index.ts สิ่งเดียวที่เราจะเปลี่ยนคือหมายเลขพอร์ต ด้วยเหตุผลสองประการ หนึ่งพอร์ต 80 อาจถูกบล็อก สอง. การทำงานบนพอร์ตที่แตกต่างกันช่วยให้เรามีโครงการโหนดหลายรายการที่ทำงานพร้อมกัน
import { Application } from '@curveball/core' ;
const app = new Application ( ) ;
app . use ( async ctx => {
ctx . response . type = 'text/plain' ;
ctx . response . body = 'hello world' ;
} ) ;
app . listen ( 9000 ) ;เริ่มต้นเซิร์ฟเวอร์ในโหมด Dev ด้วยสคริปต์ที่เราสร้างไว้ก่อนหน้านี้:
npm run start:devคุณจะได้รับผลลัพธ์ต่อไปนี้เป็น Nodemon ฟังการเปลี่ยนแปลงไฟล์:
> [email protected] start:dev /home/your_name/project
> nodemon
[nodemon] 2.0.4
[nodemon] to restart at any time, enter ` rs `
[nodemon] watching path(s): src/ ** / *
[nodemon] watching extensions: ts,jsหลังจากทำการเปลี่ยนรหัสให้ดูเอาต์พุตคอนโซลเซิร์ฟเวอร์เป็น Nodemon ในที่ทำงาน รีเฟรชหน้าเว็บเพื่อดูการอัปเดต
ตั้งค่าการโหลดซ้ำอัตโนมัติหลังจากการเปลี่ยนแปลงรหัสเพื่อการพัฒนา ติดตั้ง nodemon เพื่อตรวจสอบการเปลี่ยนแปลงไฟล์และ ts-node เพื่อเรียกใช้รหัส typeScript โดยตรงแทนที่จะต้องรวบรวมแล้วส่งต่อไปยัง node
npm install --save-dev ts-node nodemon เพิ่ม nodemon.json config สิ่งนี้จะกำหนดค่า Nodemon เพื่อดูการเปลี่ยนแปลงไฟล์. TT และ. JS ภายในไดเรกทอรีซอร์สโค้ดของคุณจากนั้นเรียกใช้คำสั่ง EXEC หลังจากการเปลี่ยนแปลง
{
"watch" : [ " src " ],
"ext" : " .ts,.js " ,
"ignore" : [],
"exec" : " ts-node ./src/index.ts "
} เพิ่มสคริปต์ NPM ภายใน package.json เพื่อเริ่ม nodemon เพื่อการพัฒนา:
"start:dev" : " nodemon " เรียกใช้ npm run start:dev เพื่อเริ่มกระบวนการโหลดซ้ำ
ติดตั้งคำแนะนำนักเทียบท่าและค้นหาเกี่ยวกับวิธีเรียกใช้ Docker โดยไม่ต้องใช้ sudo - คำแนะนำที่ไม่ได้ระบุไว้ที่นี่เนื่องจากเป็น OS / Distro เฉพาะ
สร้างไฟล์ docker-compose.yml ด้วยคอนเทนเนอร์โหนดเดียวเป็นบริการ:
ชื่อโครงการของเราคือ "โครงการ" เช่นเดียวกับชื่อของบริการและคอนเทนเนอร์ เรามีการแมปปริมาณไดเรกทอรีโครงการของเราไปที่ /โครงการภายในคอนเทนเนอร์โหนด สุดท้ายตรวจสอบให้แน่ใจว่าพอร์ตตรงกับพอร์ตที่เปิดเผยในแอปพลิเคชันของคุณ
รายละเอียดเพิ่มเติมด้านล่าง:
https://docs.docker.com/compose/Compose-file/
version : ' 3 '
services :
project :
build : .
container_name : project
volumes :
- .:/project
ports :
- " 9000 " ถัดไปสร้าง Dockerfile ด้วยเนื้อหาต่อไปนี้
FROM node:12
WORKDIR /project
COPY package.json .
RUN npm install
COPY . .
CMD [ "npm" , "run" , "start:dev" ]สิ่งนี้ตั้งค่าไดเรกทอรีโครงการของเราภายในคอนเทนเนอร์ติดตั้งแพ็คเกจโหนดของเราคัดลอกผ่านเนื้อหาจากระบบไฟล์ดั้งเดิมของเราและเริ่มต้นเซิร์ฟเวอร์ curveball ของเราในโหมด Dev
ตอนนี้นำตู้คอนเทนเนอร์ขึ้นมา:
docker-compose upคุณจะเห็นผลลัพธ์ต่อไปนี้:
Creating network "project_default" with the default driver
Building project
Step 1/7 : FROM node:12
---> dfbb88cfffc8
Step 2/7 : WORKDIR /project
---> Running in 86fff3a3c90b
Removing intermediate container 86fff3a3c90b
---> 5912fd119492
Step 3/7 : COPY package.json .
---> 4fa4df04cc6b
Step 4/7 : RUN npm install
---> Running in 8b814e4d75d2
...
(Node package installation happens here)
...
Removing intermediate container 8b814e4d75d2
---> 3bfd2b1a83e4
Step 5/7 : COPY . .
---> f6971fdf7fb5
Step 6/7 : EXPOSE 9000
---> Running in 2ab0a152b0a6
Removing intermediate container 2ab0a152b0a6
---> 0e883b79c1b3
Step 7/7 : CMD ["npm", "run", "start:dev"]
---> Running in f64884ae2643
Removing intermediate container f64884ae2643
---> 1abb8edf6373
Successfully built 1abb8edf6373
Successfully tagged project_project:latest
WARNING: Image for service project was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Creating project ...
Creating project ... done
Attaching to project
project |
project | > [email protected] start:dev /project
project | > nodemon
project |
project | [nodemon] 2.0.4
project | [nodemon] to restart at any time, enter `rs`
project | [nodemon] watching path(s): src/**/*
project | [nodemon] watching extensions: ts,js
project | [nodemon] starting `ts-node ./src/index.ts`
คุณสามารถใช้ CTRL-C เพื่อหยุดคอนเทนเนอร์
ใช้ docker-compose up -d เพื่อนำคอนเทนเนอร์ขึ้นมาในโหมดเดี่ยว -มันถูกนำขึ้นมาใน Brackground และคุณมีอิสระที่จะใช้บรรทัดคำสั่งต่อไป
เรากำลังสร้างคอนเทนเนอร์ตามโหนด V12 ไดเรกทอรีการทำงานของเราภายในคอนเทนเนอร์ถูกกำหนดเป็น /project (ซึ่งรหัสโครงการของเราจะถูกแมปไป))
เวอร์ชันของโหนดที่ติดตั้งจะขึ้นอยู่กับระบบปฏิบัติการที่ติดตั้งและความทันสมัยของแพ็คเกจ
หากคุณใช้โหนดนอกคอนเทนเนอร์ Docker และทำงานในหลาย ๆ โหนดโครงการแต่ละอันต้องการโหนดที่แตกต่างกันให้ติดตั้ง NVM:
https://github.com/nvm-sh/nvm
ขอบคุณมากต่อไปนี้ที่ช่วยฉันสร้างบทช่วยสอนนี้
