Node.js筆記

• Node.js
• Node.js安裝
• 快速入門
• • 創建測試工程
  • 使用函數
  • 使用模塊
  • 創建http服務
  • 服務端渲染
  • 接收參數
• 資源管理器NPM
• • 工程創建
  • 本地安裝
  • 全局安裝
  • 修改鏡像
• Webpack快速入門
• • 安裝webpack
  • 快速入門
  • css打包

Node.js

簡單的說 Node.js 就是運行在服務端的 JavaScript。

Node.js 是一個基于Chrome JavaScript 運行時建立的一個平臺。

Node.js是一個事件驅動I/O服務端JavaScript環境，基于Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。

Node.js安裝

1、下載對應你系統的Node.js版本:

https://nodejs.org/en/download/ 資料 文件夾中已經提供。

2、選安裝目錄進行安裝

完成以后，在控制臺輸入：

C:\Users\jack>node -v v10.17.0

快速入門

創建測試工程

創建一個工程demo1，使用開發工具打開，這里使用的是WebStorm2020.1版本；

創建一個node01.js文件，在里面輸入：

使用函數

使用模塊

每個文件就是一個模塊，有自己的作用域。在一個文件里面定義的變量、函數、類，都是私有的，對其他文件不可

見。每個模塊內部，module變量代表當前模塊。這個變量是一個對象，它的exports屬性（即module.exports）

是對外的接口。加載某個模塊，其實是加載該模塊的module.exports屬性。

創建node03.1.js

exports.add = function (a, b) {return a + b; }

創建node03.2.js

var demo = require('./node03.1'); console.log(demo.add(10, 20));

命令行執行

D:\autobackup\備課教案\node\code\demo1>node node03.2.js 30

創建http服務

http為node內置的web模塊。創建node04.js文件

/*http server*/ const http = require('http')http.createServer((req, res) => {res.writeHead(200, {'Content-Type': 'text/plain'});res.write('hello world');res.end('\n'); }).listen(8000)console.log("服務器監聽8000端口")

執行：

node node04.js

瀏覽器訪問地址：http://localhost:8000

服務端渲染

創建node05.js

/*http server*/ const http = require('http')http.createServer((req, res) => {res.writeHead(200, {'Content-Type': 'text/html'});for (var i = 0; i < 5; i++) {res.write('<h1>hello world</h1>');}res.end('\n'); }).listen(8000)console.log("服務器監聽8000端口")

通過瀏覽器訪問

接收參數

創建文件node06.js

/*http server*/ const http = require('http') const url = require('url')http.createServer((req, res) => {// 解析url地址中的查詢字符串,true將解析后的參數轉成對象var params = url.parse(req.url, true).query;res.writeHead(200, {'Content-Type': 'text/html'});for (var key in params) {res.write(`<h1>${key}:${params[key]}</h1>`);}res.end('\n'); }).listen(8000)console.log("服務器監聽8000端口")

通過url訪問：http://localhost:8000/?username=jack&age=20
訪問結果：

資源管理器NPM

npm全稱Node Package Manager，是node包管理和分發工具。其實我們可以把NPM理解為前端的Maven 。
通過npm 可以很方便地下載js庫，管理前端工程。
現在的node.js已經集成了npm工具，在命令提示符輸入 npm -v 可查看當前npm版本

工程創建

創建一個空的文件夾 demo2，使用WebStorm打開，在終端執行 npm init

D:\autobackup\備課教案\node\code\demo2>npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fields and exactly what they do.Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file.Press ^C at any time to quit. package name: (demo2) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to D:\autobackup\備課教案\node\code\demo2\package.json:{"name": "demo2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC" }Is this OK? (yes)D:\autobackup\備課教案\node\code\demo2>

index.js 是入口文件，相當于java中的main函數，可以指定，默認是index.js
按照提示輸入相關信息，如果是用默認值則直接回車即可。
name: 項目名稱
version: 項目版本號
description: 項目描述
keywords: {Array}關鍵詞，便于用戶搜索到我們的項目
最后會生成 package.json 文件，這個是包的配置文件，相當于maven的pom.xml
之后也可以根據需要進行修改。

本地安裝

全局安裝

全局安裝

npm install express -g

默認的全局安裝路徑

{sys.user}/node_modules

修改鏡像

D:\autobackup\備課教案\node\code\demo2>npm install -g nrm npm WARN deprecated mkdirp@0.3.5: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to u se Promises in 1.x.) npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) C:\Users\jack\AppData\Roaming\npm\nrm -> C:\Users\jack\AppData\Roaming\npm\node_modules\nrm\cli.js + nrm@1.2.1 added 494 packages from 880 contributors in 22.259sD:\autobackup\備課教案\node\code\demo2>nrm lsnpm -------- https://registry.npmjs.org/yarn ------- https://registry.yarnpkg.com/cnpm ------- http://r.cnpmjs.org/taobao ----- https://registry.npm.taobao.org/nj --------- https://registry.nodejitsu.com/npmMirror -- https://skimdb.npmjs.com/registry/edunpm ----- http://registry.enpmjs.org/D:\autobackup\備課教案\node\code\demo2>nrm use taobaoRegistry has been set to: https://registry.npm.taobao.org/D:\autobackup\備課教案\node\code\demo2>

Webpack快速入門

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。webpackjs

安裝webpack

npm install webpack -g npm install webpack-cli -g webpack -v

快速入門

工程結構

創建src文件夾，在src下創建bar.js

export default function bar(str) {document.write(str); }

在src下創建done.js

export default function add(a, b) {return a + b; }

在index.js編寫如下代碼

import bar from "./src/bar"; import add from "./src/done";bar('10+20=' + add(10, 20))

創建webpack.config.js

const path = require('path');module.exports = {entry: './index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'} };

執行webpack命令進行打包后生成dist文件夾，生成文件bundle.js
創建index.html引用bundle.js

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>index</title><script src="./dist/bundle.js"></script> </head> <body></body> </html>

css打包

安裝style-loader和 css-loader

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。 Loader可以理解為是模塊和資源的轉換器，它本身是一個函數，接受源文件作為參數，返回轉換的結果。這樣，我們就可以通過 require來加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。首先我們需要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css

npm install style-loader css-loader --save-dev

–save-dev ： 不會在打包的時候打包。

編寫css

修改index.js

重新打包 webpack后訪問頁面

總結

以上是生活随笔為你收集整理的2.Node.js快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。