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//实时刷新 }, }3.使用下面終端命令初始化自動創建package.json文件,一直按enter就可以了npm init4.package.json文件已經就緒,我們在本專案中安裝Webpack作為依賴套件
// 安装Webpack npm install --save-dev webpack接著在資料夾中新建app和build資料夾,app資料夾放我們要寫的js,css等模組文件,build裡放webpack打包生成的js文件以及一個index.html此時目錄結構如下: #5.在inex.html檔案中引入自動產生的bundle.js
<!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>在module1.js中定義一些變數與方法,作為一個模組使用exports導出
console.log("我是module1.js"); var a = "我是a变量"; var fn = function(){ console.log("我是fn函数"); } module.exports = { a, fn }在index.js中使用require引入module.js的方法與變數
var res = require("./module1"); require("./index.css"); console.log("我是index.js"); console.log(res.a); res.fn();6.終端運行webpackwebpack7.在package-loack.json中scripts配置對npm進行配置後可以在命令列中使用簡單的npm start指令來取代webpack的指令像下面設定後,npm dev可以取代npm webpack-dev-server --open指令
{ "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" } }此時輸入npm start 就可以打包檔案了
以上是node.js中的npm和webpack配置方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!