您好,登錄后才能下訂單哦!
本篇文章為大家展示了使用TS編寫express服務(wù)器,內(nèi)容簡明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
1. 前言
作為前端開發(fā)人員而言,ts已經(jīng)成為了一項(xiàng)必不可少的技能,類型檢查可以幫助我們?cè)匍_發(fā)時(shí)避免一些不必要的bug,而且ts支持的類和裝飾器等語法也更逼近后端語言,更適合服務(wù)器的開發(fā)。
本文將從零開始,搭建一個(gè)集成ts和eslint語法檢查的express服務(wù)器。
2. 初始化express框架
我們可以使用官方提供的express生成器來快速生成express框架。
當(dāng)然,express的初始化內(nèi)容并不復(fù)雜,你也可以從一個(gè)app.js開始搭建自己喜歡的框架模式。
# 使用express生成器之前必須全局安裝過express-generator $ npm install -g express-generator # --view后面是確定你使用哪種視圖引擎,server是你工程的名稱 $ express --view ejs server # 生成的工程并不會(huì)默認(rèn)給我們添加git,這里我們使用git init初始化一下 $ git init
初始化完成后我們添加一個(gè).gitignore文件
node_modules/ dist/
3. 添加TS支持
全局安裝TS
ts本身屬于js的超集,node和瀏覽器并不認(rèn)識(shí),執(zhí)行前需要先編譯成js,所以沒有全局安裝過ts的需要先全局安裝一下
$ npm install -g typescript
安裝express類型依賴
express是基于node環(huán)境的,所以我們需要安裝兩個(gè)類型依賴,以獲得相關(guān)api的類型提示
$ npm install @types/node --save-dev $ npm install @types/express --save-dev
配置tsconfig.json文件
在項(xiàng)目根目錄下新建tsconfig.json文件,outDir表示打包輸出路徑
{ "compilerOptions": { "target": "es2016", "module": "commonjs", "lib": ["es2016","dom"], "outDir": "./dist", }, "exclude": ["node_modules"] }
這里如果包含了include或者files選項(xiàng),將不會(huì)默認(rèn)編譯所有ts文件。
接下來我們可以把項(xiàng)目的所以js文件的后綴改為.ts,然后直接在命令行運(yùn)行
$ tsc
默認(rèn)會(huì)找到根目錄下的tsconfig.json文件,按照配置幫我們進(jìn)行編譯,編譯完成我們可以看到dist文件夾已經(jīng)將所有ts文件編譯成了js文件,而且保持了原來的目錄結(jié)構(gòu)。
接下來我們將目錄下的其他資源也放入dist文件夾下,然后運(yùn)行
$ node ./dist/bin/www
這時(shí)我們的服務(wù)已經(jīng)可以正常啟動(dòng)了,但是在開發(fā)時(shí)如果每次運(yùn)行都要進(jìn)行編譯->將資源文件移入->運(yùn)行命令的流程,那也太繁瑣了,所以接下來我們?cè)偬砑右粋€(gè)第三方庫ts-node。
使用ts-node將ts文件編譯在內(nèi)存中
在使用ts-node之前需要進(jìn)行全局安裝
$ npm install ts-node -g # 用ts-node直接運(yùn)行項(xiàng)目,這個(gè)庫會(huì)將我們的ts文件編譯成js文件保存在內(nèi)存中進(jìn)行引用 $ ts-node ./bin/www
雖然ts-node可以幫我們直接運(yùn)行ts文件,但在開發(fā)完成后部署在生產(chǎn)環(huán)境時(shí),還是推薦使用tsc打包出來的js文件會(huì)更加穩(wěn)定。
使用nodemon進(jìn)行熱更新
全局安裝nodemon
$ npm install nodemon -g # 執(zhí)行命令運(yùn)行項(xiàng)目 $ nodemon -e ts --exec ts-node ./bin/www
-e:表示指定觀察列表 (Specifying extension watch list)
--exec:代表命令行形式執(zhí)行命令
配置npm腳本
"scripts": { "start": "ts-node ./bin/www", "dev": "nodemon -e ts --exec ts-node ./bin/www", "build": "tsc", "server": "node ./dist/bin/www" }
4. 配置eslint
為什么不是tslint?
TSLint is deprecated.
See this issue for more details: Roadmap: TSLint → ESLint. If you're interested in helping with the TSLint/ESLint migration, please check out our OSS Fellowship program.
這是tslint團(tuán)隊(duì)給出的答案,目前推薦使用的是typescript-eslint。
為項(xiàng)目配置eslint
# 未全局安裝的需要全局安裝 $ npm install eslint -g $ eslint --init √ How would you like to use ESLint? · style √ What type of modules does your project use? · commonjs √ Which framework does your project use? · none √ Does your project use TypeScript? · Yes √ Where does your code run? · node √ How would you like to define a style for your project? · guide √ Which style guide do you want to follow? · standard √ What format do you want your config file to be in? · JavaScript Checking peerDependencies of eslint-config-standard@latest Local ESLint installation not found. The config that you've selected requires the following dependencies: @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@>=7.11.0 eslint-plugin-import@>=2.22.1 eslint-plugin-node@>=11.1.0 eslint-plugin-promise@>=4.2.1 eslint-plugin-standard@>=4.0.2 @typescript-eslint/parser@latest √ Would you like to install them now with npm? · Yes
關(guān)于eslint初始化的步驟還是比較簡單易懂的,這里不展開敘述,關(guān)鍵一條:Does your project use TypeScript? · Yes
使用eslint命令行初始化后的項(xiàng)目還并沒有開啟對(duì)于ts相關(guān)語法的檢查,這里需要在.eslintrc.js文件增加兩條配置
extends: [ 'standard', 'eslint:recommended', 'plugin:@typescript-eslint/recommended' ]
接下來我們會(huì)看到ts文件的一堆報(bào)錯(cuò),就可以愉快的安裝ts語法進(jìn)行修改啦!
提示:ts對(duì)于commonjs的模塊化語法并沒有完全的支持,所以在使用require和module.exports時(shí)很容易遇到各種報(bào)錯(cuò),官方也
推薦了一些解決方式,這里推薦啟用ES模塊導(dǎo)入模式
{ "compilerOptions": { ... "esModuleInterop": true } }
這樣就可以在項(xiàng)目中使用es6的import和export進(jìn)行模塊化了,ts在編譯時(shí)會(huì)根據(jù)環(huán)境對(duì)我們的代碼進(jìn)行兼容性編譯。
上述內(nèi)容就是使用TS編寫express服務(wù)器,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。