快捷導(dǎo)航

詳解node.js中的npm和webpack配置方法

更新時(shí)間：2018年01月21日 09:43:06 作者：馬大哈tt

Node.js用c++語(yǔ)言編寫(xiě)而成的，是一個(gè)基于chrome V8引擎的javascript運(yùn)行環(huán)境。這篇文章主要介紹了詳解node.js中的npm和webpack配置,需要的朋友可以參考下

概述

Node.js用c++語(yǔ)言編寫(xiě)而成的，是一個(gè)基于chrome V8引擎的javascript運(yùn)行環(huán)境，讓javaScript的運(yùn)行脫離瀏覽器服務(wù)端，可以使用javaScript語(yǔ)言書(shū)寫(xiě)服務(wù)器端代碼

1.使用node來(lái)實(shí)現(xiàn)一個(gè)http服務(wù)器

下面創(chuàng)建了一個(gè)端口為8787的服務(wù)器.他與php，java等不同，像php本地還要基于阿帕奇服務(wù)器，node.js能用代碼快速搭建一個(gè)服務(wù)器。

// 引入http模塊
var http = require("http");
// 調(diào)用http的接口創(chuàng)建服務(wù)器；回調(diào)--->異步；
var server = http.createServer(function(req,res){
 // request:瀏覽器提交給服務(wù)器相關(guān)；response:服務(wù)器到瀏覽器；
 console.log(111);
 // 設(shè)置編碼格式
 res.setHeader("Content-type","text/html;charset=utf8");
 res.write("<h1>hello world 11233</h1>");
 res.write("你好世界");
 res.end();
})
server.listen(8787);

模塊化

1. 模塊化開(kāi)發(fā)

1.CommonJS就是為JS的表現(xiàn)來(lái)制定規(guī)范，因?yàn)閖s沒(méi)有模塊的功能所以CommonJS應(yīng)運(yùn)而生，它希望js可以在任何地方運(yùn)行，不只是瀏覽器中。

2.創(chuàng)建自己的模塊

node.js中命名空間是獨(dú)立的

在一個(gè)模塊里引入另一個(gè)模塊的方法或者變量使用require

•引入fnData模塊

require("./fnData");

•導(dǎo)入與導(dǎo)出(導(dǎo)出變量或者函數(shù))

module.exports = {
myFn:test.myFn,
a:test.a
}

2. 內(nèi)置模塊

nodejs內(nèi)置模塊有：Buffer，C/C++Addons，Child Processes，Cluster，Console，Cr

ypto，Debugger，DNS，Domain，Errors，Events，F(xiàn)ile 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；內(nèi)置模塊不需要安裝，外置模塊需要安裝；

3. npm

1.一組模塊的集合，是node的包管理器

下面npm常用的終端命令

1.

安裝Node模塊

npm install moduleNames

將包安裝到全局環(huán)境中

npm install <name> -g

安裝的同時(shí)，如果有package.json文件時(shí),命令將信息寫(xiě)入package.json中項(xiàng)目路徑中

npm install <name> --save

2.查看node模塊的package.json文件夾npm view moduleNames

3.查看當(dāng)前目錄下已安裝的node包

npm list

4.查看幫助命令

npm help

5.查看包的依賴關(guān)系

npm view moudleName dependencies

6.查看包的源文件地址

npm view moduleName repository.url

7.查看包所依賴的Node的版本

npm view moduleName engines

8.查看npm使用的所有文件夾

npm help folders

9.用于更改包內(nèi)容后進(jìn)行重建

npm rebuild moduleName

10.檢查包是否已經(jīng)過(guò)時(shí)，此命令會(huì)列出所有已經(jīng)過(guò)時(shí)的包，可以及時(shí)進(jìn)行包的更新

npm outdated

11.更新node模塊

npm update moduleName

12.卸載node模塊

npm uninstall moudleName

13.一個(gè)npm包是包含了package.json的文件夾，package.json描述了這個(gè)文件夾的結(jié)構(gòu)。訪問(wèn)npm的json文件夾的方法如下：

$ npm help json

此命令會(huì)以默認(rèn)的方式打開(kāi)一個(gè)網(wǎng)頁(yè)，如果更改了默認(rèn)打開(kāi)程序則可能不會(huì)以網(wǎng)頁(yè)的形式打開(kāi)。

14.發(fā)布一個(gè)npm包的時(shí)候，需要檢驗(yàn)?zāi)硞€(gè)包名是否已存在

$ npm search packageName

15.npm init：會(huì)引導(dǎo)你創(chuàng)建一個(gè)package.json文件，包括名稱、版本、作者這些信息等

16.npm root：查看當(dāng)前包的安裝路徑

npm root -g：查看全局的包的安裝路徑

17.npm -v：查看npm安裝的版本

4. webpack

概念：是近的一加載器兼打包工具，它能把各種資源，例如J (含J X)、 coffee、樣式(含less/sass)、圖片等都作為模塊來(lái)使用和處理。

配置步驟

1.全局安裝webpack

npm install webpack -g

2.新建webpack.config.js編寫(xiě)此配置文件

module.exports = {
// 當(dāng)前執(zhí)行文件的路徑
 // 輸入
 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",//本地服務(wù)器所加載的頁(yè)面所在的目錄
  historyApiFallback: true,//不跳轉(zhuǎn)
  inline: true//實(shí)時(shí)刷新
 },
}

3.使用下面終端命令初始化自動(dòng)創(chuàng)建package.json文件，一直按enter就可以了

npm init

4.package.json文件已經(jīng)就緒，我們?cè)诒卷?xiàng)目中安裝Webpack作為依賴包

// 安裝Webpack
npm install --save-dev webpack

接著在文件夾中新建app和build文件夾，app文件夾放我們要寫(xiě)的js,css等模塊文件，build里放webpack打包生成的js文件以及一個(gè)index.html

此時(shí)目錄結(jié)構(gòu)如下：

5.在inex.html文件中引入自動(dòng)生成的bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <div class="div1"></div>
 <!--webpack/gulp/grount-->
</body>
<script src="bundle.js"></script>
</html>

在module1.js中定義一些變量與方法，作為一個(gè)模塊使用exports導(dǎo)出

console.log("我是module1.js");
var a = "我是a變量";
var fn = function(){
 console.log("我是fn函數(shù)");
}
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.終端運(yùn)行webpack

webpack

7.在package-loack.json中scripts配置

對(duì)npm進(jìn)行配置后可以在命令行中使用簡(jiǎn)單的npm start命令來(lái)替代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"
 }
}

此時(shí)輸入npm start 就可以打包文件了