node.js中的npm和webpack配置方法詳解
Node.js用c++語言編寫而成的，是一個基於chrome V8引擎的javascript運行環境，讓javaScript的運行脫離瀏覽器服務端，可以使用javaScript語言書寫伺服器端程式碼，主要介紹了詳解node. js中的npm和webpack配置,需要的朋友可以參考下，希望能幫助到大家。
1.使用node來實作一個http伺服器
下面建立了一個連接埠為8787的伺服器.他與php，java等不同，像php本地還要基於阿帕契伺服器， node.js能用程式碼快速搭建一個伺服器。
// 引入http模块
var http = require("http");
// 调用http的接口创建服务器；回调--->异步；
var server = http.createServer(function(req,res){
// request:浏览器提交给服务器相关；response:服务器到浏览器；
console.log(111);
// 设置编码格式
res.setHeader("Content-type","text/html;charset=utf8");
res.write("<h1>hello world 11233</h1>");
res.write("你好世界");
res.end();
})
server.listen(8787);模組化
1. 模組化開發
1.CommonJS就是為JS的表現來製定規範，因為js沒有模組的功能所以CommonJS應運而生，它希望js可以在任何地方運行，而不是在瀏覽器中。
2.建立自己的模組
node.js中命名空間是獨立的
在一個模組中引入另一個模組的方法或變數使用require
•引入fnData模組
require("./fnData");
#•導入與導出(導出變數或函數)
module.exports = {
myFn:test.myFn,
a:test.a
}2. 內建模組
nodejs內建模組有：Buffer，C/C++Addons，Child Processes，Cluster，Console，Cr
ypto，Debugger，DNS，Domain，Errors，Events，File System，
Globals，HTTP，HTTPS，Modules，Net，OS，Path，Process，P unycode，Query Strings，Readline，REPL，Stream，String De coder，Timers，TLS/SSL，TTY，UDP/Datagram，URL， Utilities，V8，VM，ZLIB；內建模組不需要安裝，外部模組需要安裝；
3. npm
1.一組模組的集合，是node的套件管理器
下面npm常用的終端指令
1.
安裝Node模組
npm install moduleNames
將套件安裝到全域環境中
npm install
安裝的同時，如果有package.json檔案時,指令將資訊寫入package.json中專案路徑中
#npm install
2.查看node模組的package.json資料夾npm view moduleNames
##3.查看目前目錄下已安裝的node套件npm list4.查看幫助指令npm help#5.查看套件的依賴關係npm view moudleName dependencies6.查看套件的來源檔案位址npm view moduleName repository.url7.查看套件所依賴的Node的版本npm view moduleName engines8.查看npm使用的所有資料夾npm help folders#9.用於更改套件內容後進行重建npm rebuild moduleName10.檢查套件是否已經過時，此指令會列出所有已經過時的套件，可以及時進行套件的更新npm outdated11.更新node模組npm update moduleName12.卸載node模組npm uninstall moudleName#13.一個npm套件是包含了package.json的資料夾，package.json描述了這個資料夾的結構。存取npm的json資料夾的方法如下：$ npm help json此指令會以預設的方式開啟一個網頁，如果變更了預設開啟程式則可能不會以網頁的形式打開。 14.發佈一個npm套件的時候，需要檢驗某個套件名稱是否已存在$ npm search packageName15.npm init：會引導你建立一個package.json文件，包括名稱、版本、作者這些資訊等16.npm root：查看目前套件的安裝路徑npm root -g：查看全域的套件的安裝路徑17.npm -v：查看npm安裝的版本4. webpack概念：是近的一載入器兼打包工具，它能把各種資源，例如J (含J X)、 coffee、樣式(含less/sass)、圖片等都作為模組來使用和處理。 設定步驟1.全域安裝webpacknpm install webpack -g2.新webpack.config.js編寫此設定檔
module.exports = {
// 当前执行文件的路径
// 输入
entry:__dirname+"/app/index.js",
// 输出
output:{
path:__dirname+"/build",
filename:"bundle.js"
},
module:{
loaders:[{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
},
watch:true,
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
}// 安装Webpack npm install --save-dev webpack
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p class="p1"></p> <!--webpack/gulp/grount--> </body> <script src="bundle.js"></script> </html>
console.log("我是module1.js");
var a = "我是a变量";
var fn = function(){
console.log("我是fn函数");
}
module.exports = {
a,
fn
}var res = require("./module1");
require("./index.css");
console.log("我是index.js");
console.log(res.a);
res.fn();{
"dependencies": {
"css-loader": "^0.28.8",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
},
"devDependencies": {
"webpack-dev-server": "^2.11.0"
},
"scripts": {
"start": "webpack",
"dev": "webpack-dev-server --open"
}
}
以上是node.js中的npm和webpack配置方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
