鴻蒙OS 4.0公測(cè)機(jī)型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統(tǒng)將于今天下午正式登場(chǎng)，官方在發(fā)布會(huì)之前也已經(jīng)正式給出了可升級(jí)的機(jī)型產(chǎn)品，這意味著這些機(jī)型會(huì)率先支持升級(jí)享用。這次的HarmonyOS 4.0支持
筆者最近在工作之余,一直在做數(shù)據(jù)可視化和nodejs方面的研究,雖然之前的web工作中接觸過(guò)nodejs和可視化相關(guān)的內(nèi)容,但是沒(méi)有一個(gè)系統(tǒng)的總結(jié)和回顧,所以為了更深入的研究和復(fù)盤(pán)我的nodejs和數(shù)據(jù)可視化之路,筆者將會(huì)花兩個(gè)月的時(shí)間,做一個(gè)徹底的復(fù)盤(pán).
Node.js是一個(gè)事件驅(qū)動(dòng)I/O服務(wù)端JavaScript環(huán)境，基于Google的V8引擎，V8引擎執(zhí)行Javascript的速度非常快，性能非常好。
可能很多朋友都或多或少的接觸過(guò)nodejs,筆者先來(lái)大致總結(jié)了一下nodejs的應(yīng)用領(lǐng)域:
由上圖可以看出,nodejs的應(yīng)用前景還是非常廣泛的,前幾年比較火的IOT物聯(lián)網(wǎng)技術(shù),nodejs也有一定的領(lǐng)域貢獻(xiàn).
所以作為一名前端工程師(國(guó)際一點(diǎn)的叫法Front-end engineer), 要想讓自己的未來(lái)有更多的想象空間,node是必不可少的技能之一.話不多說(shuō),接下來(lái)筆者將帶大家一步步搭建一個(gè)高可用的nodejs開(kāi)發(fā)環(huán)境,以便讓大家能更快更好的上手nodejs的開(kāi)發(fā)工作.
在介紹正文之前，我想先談?wù)勄岸隧?xiàng)目的管理。就筆者的工作和管理經(jīng)驗(yàn)，衡量一個(gè)前端項(xiàng)目管理的好壞往往有以下幾個(gè)衡量點(diǎn)：
圖片
還原度和功能的完整性這兩個(gè)方面可以通過(guò)完善的測(cè)試體系去把控，對(duì)于代碼的擴(kuò)展性，維護(hù)性和可讀性的評(píng)定，首先需要由團(tuán)隊(duì)負(fù)責(zé)人去制定相應(yīng)的代碼規(guī)范和規(guī)則，最大限度的保證同一個(gè)項(xiàng)目不同模塊的一致性。比如注釋規(guī)范，格式規(guī)范，目錄結(jié)構(gòu)和文件命名等。其次放眼大局，公司如果有多個(gè)項(xiàng)目，或者多個(gè)項(xiàng)目會(huì)彼此聯(lián)系，這時(shí)候我們更要從整個(gè)前端架構(gòu)的角度去衡量和設(shè)計(jì)，所以前端項(xiàng)目不僅僅是泛泛而談，它對(duì)企業(yè)長(zhǎng)遠(yuǎn)的產(chǎn)品架構(gòu)，技術(shù)架構(gòu)上有著非常重要的作用。所以說(shuō)制定團(tuán)隊(duì)或者項(xiàng)目規(guī)范，可以說(shuō)是項(xiàng)目開(kāi)始最為關(guān)鍵的一步。
圖片
用過(guò)eslint的朋友都知道，eslint主要是針對(duì)javascript代碼檢測(cè)用的插件化工具。它可以約束代碼的書(shū)寫(xiě)格式，語(yǔ)法規(guī)范，比如保持代碼一致的縮進(jìn)，代碼末尾有無(wú)分號(hào)，使用單引號(hào)還是雙引號(hào)等，我們通過(guò)一系列的配置，將會(huì)打造完全一致的代碼寫(xiě)作風(fēng)格，這樣對(duì)后期的代碼管理和維護(hù)有著非常重要的意義。說(shuō)了這么多，我們看看看怎么使用在我們的nodejs項(xiàng)目中吧。
首先在eslint官網(wǎng)我們可以知道下載和安裝的方式，這里我們采用全局安裝：
npm install eslint --global然后我們就可以在項(xiàng)目中生成eslint的配置文件了，具體可選擇的配置文件類(lèi)型有專(zhuān)屬的.eslintrc的靜態(tài)json文件， 或者可動(dòng)態(tài)配置的eslintrc.js文件，這里筆者建議采用后者, 在當(dāng)前項(xiàng)目下生成配置文件的命令如下：
eslint --init這樣通過(guò)命令行的方法我們就可以生成我們想要的eslint配置文件了。首先筆者先上一份簡(jiǎn)單的eslint配置文件：
module.exports = { "env": { "browser": true, "node": true, // 啟用node環(huán)境 "es6": true // 啟用es6語(yǔ)法 }, "extends": "eslint:recommended", "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" }, "rules": { "semi": [2, "never"], // 結(jié)尾不能有分號(hào) "eqeqeq": "warn", // 要求使用 === 和 !== "no-irregular-whitespace": "warn", // 禁止不規(guī)則的空白 "no-empty-pattern": "warn", // 禁止使用空解構(gòu)模式 "no-redeclare": "warn", // 禁止多次聲明同一變量 "quotes": ["error", "single"], // 代碼中使用單引號(hào)包裹字符串 "indent": ["warn", 2], // 代碼縮進(jìn)為2個(gè)空格 "no-class-assign": "error", // 禁止修改類(lèi)聲明的變量 "no-const-assign": "error", // 禁止修改 const 聲明的變量 }};其中rules中鍵的值分別表示：
這里的rule規(guī)則大家可以采用市面上已有的規(guī)則文件或者可以根據(jù)自己的團(tuán)隊(duì)風(fēng)格自行配置，eslint上有比較全面的規(guī)則配置表：
圖片
當(dāng)我們的配置規(guī)則配置完畢后，我們只需要在npm的scripts腳本文件中添加執(zhí)行代碼，eslint就會(huì)自動(dòng)幫我們校驗(yàn)代碼：
"scripts": { "start": "eslint src && export NODE_ENV=development && nodemon -w src" }上面代碼中eslint src表示對(duì)src目錄進(jìn)行eslint語(yǔ)法規(guī)則和格式校驗(yàn)，如果我們代碼有不符合規(guī)范的，那么在控制臺(tái)將會(huì)顯示相應(yīng)的錯(cuò)誤。比如我們代碼中寫(xiě)了雙引號(hào)，則運(yùn)行項(xiàng)目的時(shí)候會(huì)出現(xiàn)如下錯(cuò)誤：
圖片
我們都知道，nodejs對(duì)es的支持還不夠完善，雖然在10.0+已經(jīng)支持大部分的es語(yǔ)法了，但是最重要的模塊化語(yǔ)法（import，export），類(lèi)（class）和修飾器（Decorator）還不支持，作為一名有追求的前端工程師，為了讓代碼更優(yōu)雅更簡(jiǎn)潔，我們有理由去用最新的特性去編寫(xiě)更加強(qiáng)大的代碼，所以完善的es的環(huán)境支持是搭建nodejs項(xiàng)目的第二步。
圖片
沒(méi)錯(cuò)，為了實(shí)現(xiàn)對(duì)es語(yǔ)法更全面的支持，babel是我們的不二選擇。和eslint類(lèi)似，編寫(xiě)babel同樣也有幾種編寫(xiě)配置文件的方式，這里我們還是采用js的方式，這樣的好處是可以根據(jù)環(huán)境動(dòng)態(tài)配置不同的編譯方式。
我們這里統(tǒng)一采用babel7來(lái)給大家介紹如何配置es環(huán)境，如果你還在使用babel6或者更低的版本，可以查看對(duì)應(yīng)文檔的版本進(jìn)行配置。babel7將很多功能都內(nèi)置到了自己的模塊中，我們首先要配置環(huán)境，即preset-env，我們可以使用@babel/preset-env，對(duì)于class和Decorator的支持，我們需要安裝@babel/plugin-proposal-class-properties和@babel/plugin-proposal-decorators這兩個(gè)模塊。所以我們一共需要安裝如下幾個(gè)模塊：
關(guān)于babel的配置機(jī)制，官網(wǎng)上也寫(xiě)的很詳細(xì)，大家感興趣的可以看一下，核心就是環(huán)境（presets）和插件（plugin）機(jī)制。官網(wǎng)對(duì)preset-env的解釋如下：
圖片
即@babel/preset-env是一個(gè)智能的允許我們使用最新javascript語(yǔ)法的代碼自動(dòng)轉(zhuǎn)化工具。同時(shí)官網(wǎng)也列出了不同配置屬性對(duì)應(yīng)的不同功能，為了節(jié)約篇幅，我們直接上配置的代碼：
module.exports = function (api) { api.cache(true) const presets = [ [ '@babel/preset-env', { 'targets': { 'node': 'current' } } ] ] const plugins = [ ['@babel/plugin-proposal-decorators', { 'legacy': true }], ['@babel/plugin-proposal-class-properties', { 'loose' : true }] ] return { presets, plugins }}這也是官方推薦的使用方式，更多靈活的配置大家可以參考官網(wǎng)配置。以上兩個(gè)plugin的作用不言而知，一個(gè)是用來(lái)編譯轉(zhuǎn)換修飾器屬性的，一個(gè)是用來(lái)編譯轉(zhuǎn)換class語(yǔ)法的。最后一步就是在package.json中的腳本文件中使用我們的babel工具：
"scripts": { "start": "eslint src && nodemon -w src --exec /"babel-node src/"", "build": "babel src --out-dir dist" }babel-node src指定了需要編譯的node目錄為src目錄，其他文件和目錄無(wú)需編譯。
通過(guò)這樣的配置，我們就能開(kāi)心的用最新的javascript語(yǔ)法開(kāi)發(fā)nodejs項(xiàng)目了,在代碼編寫(xiě)完成之后，我們執(zhí)行npm run build即可將src的代碼打包編譯到dist目錄下。編譯后的代碼如下：
"use strict";var _glob = _interopRequireDefault(require("glob"));var _path = require("path");var _xoa = _interopRequireDefault(require("./lib/xoa.js"));var _config = _interopRequireDefault(require("./config"));function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }const app = new _xoa.default();app.use((req, res) => { console.log(req.url, req.method);}); // 全局注冊(cè)業(yè)務(wù)接口// function autoRegister(path, )_glob.default.sync((0, _path.resolve)(__dirname, './routes/*.js')).forEach(item => { app.use(require(item).default);});// ...nodemon的使用非常簡(jiǎn)單，我們只需要按照官網(wǎng)文檔的配置來(lái)安裝和使用即可：
npm install --save-dev nodemon然后在package.json的腳本文件中如下配置：
"scripts": { "start": "eslint src && export NODE_ENV=development && nodemon -w src --exec /"babel-node src/"", "build": "babel src --out-dir dist", "buildR": "node dist", "test": "echo /"Error: no test specified/" && exit 1" }nodemon -w src 表示監(jiān)聽(tīng)src目錄下的文件變化，一旦文件變化將立刻重新啟動(dòng)node程序。我們還可以專(zhuān)門(mén)寫(xiě)一個(gè)nodemon的配置文件，實(shí)現(xiàn)不監(jiān)聽(tīng)某一個(gè)具體的文件變動(dòng)，或者其他自定義的配置，如果服務(wù)上線，我們還可以用forever和nodemon結(jié)合來(lái)是實(shí)現(xiàn)持久化，當(dāng)然主流的方式還是pm2.
第四點(diǎn)是本文的核心和關(guān)鍵，目錄劃分往往考驗(yàn)的是程序員對(duì)項(xiàng)目和架構(gòu)的理解程度，對(duì)于服務(wù)端的目錄結(jié)構(gòu)，筆者的經(jīng)驗(yàn)如下：
圖片
具體目錄如下：
圖片
當(dāng)然不同目錄之間可以進(jìn)一步細(xì)分，這個(gè)取決于項(xiàng)目規(guī)模。通過(guò)對(duì)項(xiàng)目有條理的結(jié)構(gòu)化設(shè)計(jì)，團(tuán)隊(duì)中不同的成員就可以有序的負(fù)責(zé)不同的模塊了。這種架構(gòu)模式參考了傳統(tǒng)的mvc的模式，具體還是需要代碼層面進(jìn)一步控制。
接下來(lái)筆者將用原生javascript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的node服務(wù)層的封裝，以實(shí)現(xiàn)更便捷的node開(kāi)發(fā)，當(dāng)然在實(shí)際項(xiàng)目中我們完全可以采用koa，egg這種成熟的框架來(lái)開(kāi)發(fā)node應(yīng)用，這里筆者只是簡(jiǎn)單實(shí)現(xiàn)一個(gè)例子方便大家對(duì)node開(kāi)發(fā)有個(gè)更深入的認(rèn)知。
我們都知道nodejs有http模塊方便我們快速創(chuàng)建一個(gè)node服務(wù)器，代碼可能長(zhǎng)這個(gè)樣子：
import { createServer } from 'http'createServer((req, res) => { res.end('hello world!')}).listen(3000)這樣就創(chuàng)建了一個(gè)簡(jiǎn)單的服務(wù)器，當(dāng)我們?cè)L問(wèn)localhost:3000的話我們就能看到頁(yè)面會(huì)顯示hello world! 但是我們?nèi)绻雽?shí)現(xiàn)更復(fù)雜的功能，比如根據(jù)不同的路由處理不同的邏輯，我們?cè)撛趺崔k呢？也許你會(huì)說(shuō)直接在createServer的回調(diào)中根據(jù)req.url來(lái)判斷，代碼如下：
import { createServer } from 'http'createServer((req, res) => { if(req.url === 'A') { // A的邏輯 }else if(req.url === 'B') { // B的邏輯 }else if(req.url === 'C') { // C的邏輯 } // ...}).listen(3000)但是一旦業(yè)務(wù)邏輯復(fù)雜了，路由變多了，我們將寫(xiě)大量的if else代碼，這對(duì)于維護(hù)性來(lái)說(shuō)是一種極大的摧毀，我們希望將路由和業(yè)務(wù)邏輯劃分，分開(kāi)來(lái)管理，這樣對(duì)于后期業(yè)務(wù)邏輯日漸復(fù)雜，頁(yè)面路由不斷增加才更加容易維護(hù)和管理。如何實(shí)現(xiàn)這一目標(biāo)呢？我們可以參考koa的中間件機(jī)制，當(dāng)我們要注冊(cè)一個(gè)路由時(shí)，我們只需要這樣寫(xiě)：
app.use(routeA)這樣是不是更優(yōu)雅一點(diǎn)呢？所以我們基于以上需要來(lái)實(shí)現(xiàn)一個(gè)自己的小型服務(wù)框架
圖片
代碼實(shí)現(xiàn)如下：
import { createServer } from 'http'class Xoa { constructor() { // 初始化中間鍵數(shù)組 this.middleware = [] } // 維持中間鍵數(shù)組 use(func) { this.middleware.push(func) } // 創(chuàng)建服務(wù)器實(shí)例,并執(zhí)行相應(yīng)任務(wù) createServer() { const server = createServer((req, res) => { // 應(yīng)用中間件 this.middleware.forEach((fn) => fn(req, res)) }) return server } // 服務(wù)器監(jiān)聽(tīng) listen(port = 3000, cb) { this.createServer().listen(port, cb) }}export default Xoa通過(guò)這樣的設(shè)計(jì)，我們就能優(yōu)雅的使用中間件語(yǔ)法了：
import Xoa from './lib/xoa.js'const app = new Xoa()app.use((req, res) => { console.log(req.url, req.method) res.end('A')})app.use((req, res) => { res.end('B')})app.listen(3000)我們?cè)賮?lái)看另外一種場(chǎng)景，如果我們的路由很多，有負(fù)責(zé)頁(yè)面渲染的路由，也有負(fù)責(zé)輸出api數(shù)據(jù)的路由，那么我們要每個(gè)都使用use來(lái)use一遍，這樣感覺(jué)太傻了，作為一個(gè)有追求的程序員是不允許這種事情發(fā)生的，我們希望這一切都是自動(dòng)完成的，自動(dòng)注冊(cè)中間件，這該怎么實(shí)現(xiàn)呢？
好在node社區(qū)提供了一個(gè)強(qiáng)大的第三方模塊glob，我們可以通過(guò)glob來(lái)遍歷目錄實(shí)現(xiàn)自動(dòng)化注冊(cè)路由，關(guān)于glob的用法這里就不帶大家細(xì)說(shuō)了，用法非常簡(jiǎn)單。
比如我們的路由文件有如下幾個(gè)：
圖片
我們要保證路由目錄下面的路由文件都有導(dǎo)出，然后在 入口文件中我們可以這么實(shí)現(xiàn)：
import glob from 'glob'import { resolve } from 'path'import Xoa from './lib/xoa.js'import config from './config'const app = new Xoa()// 全局注冊(cè)業(yè)務(wù)接口glob.sync(resolve(__dirname, './routes/*.js')).forEach(item => { app.use(require(item).default)})app.listen(config.serverPort, () => { console.log(`服務(wù)器地址:${config.protocol}//${config.host}:${config.serverPort}`)})通過(guò)glob的sync方法我們可以遍歷routes目錄并通過(guò)require加載路由文件，然后直接注冊(cè)到app上，這樣就不用我們手動(dòng)一個(gè)個(gè)引入了，是不是非常簡(jiǎn)單呢？（雖然這只是個(gè)極簡(jiǎn)版的服務(wù)端封裝，對(duì)于實(shí)際項(xiàng)目需要做進(jìn)一步的升級(jí)和擴(kuò)展，但是設(shè)計(jì)思想希望大家能有所收獲.
對(duì)于負(fù)責(zé)項(xiàng)目我們可能還會(huì)考慮業(yè)務(wù)邏輯，我們會(huì)在service目錄下編寫(xiě)我們的服務(wù)層代碼，在路由文件中使用，也有可能采用到數(shù)據(jù)庫(kù)模塊等，所以說(shuō)這些都是比較有意思的實(shí)現(xiàn)，后面筆者將帶大家繼續(xù)做一個(gè)全棧項(xiàng)目，來(lái)感受node開(kāi)發(fā)的魅力。
注: 本文代碼已傳到github上了，地址：https://github.com/MrXujiang/smart-node-tpl
本文鏈接：http://www.tebozhan.com/showinfo-26-13836-0.html用Babel和Nodemon搭建一個(gè)功能齊全的Nodejs開(kāi)發(fā)環(huán)境
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)