nodejs編譯成什麼代碼
① 如何用sublimeText3編寫less並用Nodejs自動編譯成css
1、安裝Sublime 插件
(1)安裝LESS插件:
因為Sublime不支持Less語法高亮,
所以,先安裝這個插件,
方法1: ctrl+shift+p>install Package>輸入less按Enter
方法2:直接下載後 解壓文件 放到插件文件夾下(首選項-瀏覽插件 打開文件夾)
下載地址:https://github.com/danro/LESS-sublime
(2)安裝LESS2CSS插件:
less2css的讀音 其實就是less to css
這個插件的作用是
當保存less文件的時候自動生成同名的css文件;
當保存less文件的時候提示編譯錯誤信息;
批量編譯項目目錄下的所有less文件為css文件。
安裝:
方法1:ctrl+shift+p>install Package>輸入less2css按Enter
方法2:直接下載:https://github.com/timdouglas/sublime-less2css
解壓文件 放到插件文件夾下
但是我們還要讓sublime支持less並自動編譯,所以還需以下步驟:
2、安裝Node.js
首先先配置一下環境,
less需要nodejs支持,
所以我們先要安裝一下nodejs
到nodejs官網下載就可以了:https://nodejs.org/en/
3、安裝less
運行-cmd:
輸入命令行:
npm install less -g
-g 代表著全局安裝less
之後在 Sublime 裡面建less文件時,會有一個錯誤
LESS: Unable to interpret argument clean-css
這是因為還需要一個插件
less-plugin-clean-css插件的安裝
命令行為:
npm install less-plugin-clean-css -g
接著重啟一下sublime,就搞定啦!
② 前端用nodejs能做什麼
Node.js到底是什麼?
Node.js是一個javaScript的編譯環境,當前端語言JavaScript在寫完之後可以交給Node.js進行編譯和解釋,它的存在對於JavaScript有了質的飛躍。
下面就是一個簡單的Node.js命令
#node hello.js
目前,Node.js在大部分領域都佔有一席之地,尤其是I/O密集型的。
比如Web開發,微服務,前端構建等。不少大型網站都是使用 Node.js 作為後台開發語言的,用的最多的就是使用Node.js做前端渲染和架構優化,比如 淘寶 雙十一、去哪兒網 的 PC 端核心業務等。另外,有不少知名的前端庫也是使用 Node.js 開發的,如Webpack是一個強大的打包器,React/Vue 是成熟的前端組件化框架。
Node.js通常被用來開發低延遲的網路應用,也就是那些需要在伺服器端環境和前端實時收集和交換數據的應用(API、即時聊天、微服務)。阿里巴巴、騰訊、Qunar、網路、PayPal、道瓊斯、沃爾瑪和 LinkedIn 都採用了 Node.js 框架搭建應用。
另外, Node.js 編寫的包管理器npm已成為開源包管理了領域最好的生態,直接到2017年10月份,有模塊超過47萬,每周下載量超過32億次,每個月有超過700萬開發者使用npm。
Node.js是一個對於前端工作者不可或缺的工具。尤其是對於JavaScript有著巨大的提升,現階段Node.js的應用已經有了非常蓬勃的發展。對於Node.js的學習和熟練運用,必不可少!
③ nodejs編譯後js文件名前綴
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node與javaScript的區別在於,javaScript的頂層對象是window,而node是global
//這里使用的var聲明的變數不是全局的,是當前模塊下的,用global聲明的表示是全局的
var s = 100;
global.s = 200;
//這里訪問到的s是var生命的
console.log(s); //100
//這里訪問到的才是全局變數
console.log(global.s); //200
模塊:在node中,文件和模塊是一一對應的,也就是一個文件就是一個模塊;每個模塊都有自己的作用域,我們通過var申明的變數並非全局而是該模塊作用域下的。
(2)mole模塊
1、文件查找
1)首先按照載入的模塊的文件名稱進行查找,如果沒有找到,則會帶上 .js、.json 或 .node 拓展名在載入
2)以 '/' 為前綴的模塊是文件的絕對路徑。 例如,require('/home/marco/foo.js') 會載入 /home/marco/foo.js 文件。
3)以 './' 為前綴的模塊是相對於調用 require() 的文件的。 也就是說,circle.js 必須和 foo.js 在同一目錄下以便於 require('./circle') 找到它。
4)當沒有以 '/'、'./' 或 '../' 開頭來表示文件時,這個模塊必須是一個核心模塊或載入自 node_moles 目錄。
5)如果給定的路徑不存在,則 require() 會拋出一個 code 屬性為 'MODULE_NOT_FOUND' 的 Error。
2、mole 作用域
在一個模塊中通過var定義的變數,其作用域范圍是當前模塊,外部不能夠直接的訪問,如果我們想一個模塊能夠訪問另外一個模塊中定義的變數,可以有一下兩種方式:
1)把變數作為global對象的一個屬性,但這樣的做法是不推薦的
2)使用模塊對象 mole。mole保存提供和當前模塊有關的一些信息。
在這個mole對象中有一個子對象exports對象,我們可以通過這個對象把一個模塊中的局部變數對象進行提供訪問。
//這個方法的返回值,其實就是被載入模塊中的mole.exports
require('./02.js');
3、__dirname:當前模塊的目錄名。
例子,在 /Users/mjr 目錄下運行 node example.js:
console.log(__dirname);
// 輸出: /Users/mjr
console.log(path.dirname(__filename));
// 輸出: /Users/mjr
4、__filename:當前模塊的文件名(處理後的絕對路徑)。當前模塊的目錄名可以使用 __dirname 獲取。
在 /Users/mjr 目錄下運行 node example.js:
console.log(__filename);
// 輸出: /Users/mjr/example.js
console.log(__dirname);
// 輸出: /Users/mjr
(3)process(進程)
process 對象是一個全局變數,提供 Node.js 進程的有關信息以及控制進程。 因為是全局變數,所以無需使用 require()。
1、process.argv
返回進程啟動時的命令行參數。第一個元素是process.execPath。第二個元素是當前執行的JavaScript文件的路徑。剩餘的元素都是額外的命令行參數。
console.log(process.argv);
列印結果:
2、process.execPath返回啟動進程的可執行文件的絕對路徑。
3、process.env 返回用戶的環境信息。
在process.env中可以新增屬性:
process.env.foo = 'bar';
console.log(process.env.foo);
可以通過delete刪除屬性:
delete process.env.foo;
console.log(process.env);
在Windows上,環境變數不區分大小寫
4、process.pid 屬性返回進程的PID。
5、process.platform屬性返回字元串,標識Node.js進程運行其上的操作系統平台。
6、process.title 屬性用於獲取或設置當前進程在 ps 命令中顯示的進程名字
7、process.uptime() 方法返回當前 Node.js 進程運行時間秒長
注意: 該返回值包含秒的分數。 使用 Math.floor() 來得到整秒鍾。
8、process.versions屬性返回一個對象,此對象列出了Node.js和其依賴的版本信息。
process.versions.moles表明了當前ABI版本,此版本會隨著一個C++API變化而增加。 Node.js會拒絕載入模塊,如果這些模塊使用一個不同ABI版本的模塊進行編譯。
9、process對象-輸入輸出流
var a;
var b;
process.stdout.write('請輸入a的值: ');
process.stdin.on('data', (chunk) => {
if (!a) {
a = Number(chunk);
process.stdout.write('請輸入b的值:');
}else{
b = Number(chunk);
process.stdout.write('a+b的值:'+(a+b));
process.exit();
}
});
(4)Buffer緩沖器
Buffer類,一個用於更好的操作二進制數據的類,我們在操作文件或者網路數據的時候,其實操作的就是二進制數據流,Node為我們提供了一個更加方便的去操作這種數據流的類Buffer,他是一個全局的類
1、如何創建使用buffer
Buffer.from(array) 返回一個 Buffer,包含傳入的位元組數組的拷貝。
Buffer.from(arrayBuffer[, byteOffset [, length]]) 返回一個 Buffer,與傳入的 ArrayBuffer 共享內存。
Buffer.from(buffer) 返回一個 Buffer,包含傳入的 Buffer 的內容的拷貝。
Buffer.from(string[, encoding]) 返回一個 Buffer,包含傳入的字元串的拷貝。
Buffer.alloc(size[, fill[, encoding]]) 返回一個指定大小且已初始化的 Buffer。 該方法比 Buffer.allocUnsafe(size) 慢,但能確保新創建的 Buffer 不會包含舊數據。
Buffer.allocUnsafe(size) 與 Buffer.allocUnsafeSlow(size) 返回一個指定大小但未初始化的 Buffer。 因為 Buffer 是未初始化的,可能包含舊數據。
// 創建一個長度為 10、且用 01 填充的 Buffer。
const buf1 = Buffer.alloc(10,1);
// 創建一個長度為 10、且未初始化的 Buffer。
// 這個方法比調用 Buffer.alloc() 更快,但返回的 Buffer 實例可能包含舊數據,因此需要使用 fill() 或 write() 重寫。
const buf2 = Buffer.allocUnsafe(10);
const buf3 = Buffer.from([1, 2, 3]);
const buf4 = Buffer.from('tést');
console.log(buf1); //<Buffer 01 01 01 01 01 01 01 01 01 01>
console.log(buf2); //<Buffer 00 00 00 00 08 00 00 00 07 00>
console.log(buf3); //<Buffer 01 02 03>
console.log(buf4); //<Buffer 74 c3 a9 73 74>
2、Buffer對象提供的toString、JSON的使用
1)buf.toString(encoding,start,end)
var bf = Buffer.from('miaov');
console.log(bf.toString('utf-8',1,4)); //iaov
console.log(bf.toString('utf-8',0,5)); //miaov
console.log(bf.toString('utf-8',0,6)); //miaov
2)buf.write(string,offset,length,encoding)
string 要寫入 buf 的字元串。
offset 開始寫入的偏移量。默認 0,這里指的是buffer對象的起始要寫入的位置。
length 要寫入的位元組數。默認為 buf.length - offset。
encoding string 的字元編碼。默認為 'utf8'。
返回: 已寫入的位元組數。
var str = "miaov hello";
var bf = Buffer.from(str);
var bf2 = Buffer.alloc(8);
//從0開始寫入5個
bf2.write(str,0,5);
console.log(bf);
console.log(bf2);
3)buf.toJSON()
const buf = Buffer.from([0x1, 0x2, 0x3, 0x4, 0x5]);
const json = JSON.stringify(buf);
console.log(json);
// 輸出: {"type":"Buffer","data":[1,2,3,4,5]}
3、Buffer中靜態方法的使用
1)Buffer.isEncoding(encoding) : 判斷是否是Buffer支持的字元編碼,是則返回true,不是則返回false
console.log(Buffer.isEncoding('utf-8')); //true
2)Buffer.isBuffer(obj) :如果 obj 是一個 Buffer,則返回 true,否則返回 false。
(5)fs(文件系統)
該模塊是核心模塊,需要使用require('fs')導入後使用,該模塊主要用來操作文件
1、fs.open(path, flags, mode, callback)
path:要打開的文件的路徑;
flags:打開文件的方式 讀/寫;
mode:設置文件的模式 讀/寫/執行
callback(err,fd):文件打開以後,在回調函數中做相應的處理,回調函數的兩個參數:
err:文件打開失敗的錯誤保存在err裡面,如果成功err為null
fd:被打開文件的標識
var fs = require('fs');
fs.open('./test.txt','r',function(err,fd){
if(err){
console.log("文件打開失敗");
}else{
console.log("文件打開成功");
}
});
2、fs.openSync(path, flags, mode) :返迴文件描述符。
var fs = require('fs');
console.log(fs.openSync('./test.txt','r')); //3
3、fs.read(fd, buffer, offset, length, position, callback)
從 fd 指定的文件中讀取數據;
buffer 指定要寫入數據的 buffer;
offset 指定 buffer 中開始寫入的偏移量;
length 指定要讀取的位元組數;
position 指定文件中開始讀取的偏移量。 如果 position 為 null,則從文件的當前位置開始讀取;
callback 有三個參數 (err, bytesRead, buffer)
示例:test.txt 中的值為123456789
fs.open('./test.txt','r',function(err,fd){
if(!err){
var bf = Buffer.alloc(5);
fs.read(fd,bf,0,5,0,function(){
console.log(bf.toString()); //12345
})
}
});
4、fs.write(fd, buffer, offset, length, position, callback)
將 buffer 寫入到 fd 指定的文件。
offset 指定 buffer 中要開始被寫入的偏移量,length 指定要寫入的位元組數。
position 指定文件中要開始寫入的偏移量。 如果 typeof position !== 'number',則從當前位置開始寫入。
callback 有三個參數 (err, bytesWritten, buffer),其中 bytesWritten 指定 buffer 中已寫入文件的位元組數。
var fs = require('fs');
fs.open('./test.txt','r+',function(err,fd){
if(!err){
var bf = Buffer.alloc(5);
fs.read(fd,bf,0,5,0,function(){
console.log(bf.toString()); //12345
});
var bf = Buffer.from('test數據');
fs.write(fd,bf,0,10,0);
fs.write(fd,'測試數據2',10,'utf-8');
}
});
fs.write(fd, string, position, encoding, callback)
將 string 寫入到 fd 指定的文件。 如果 string 不是一個字元串,則會強制轉換成字元串。
position 指定文件中要開始寫入的偏移量。 如果 typeof position !== 'number',則從當前位置開始寫入。
encoding 指定字元串的編碼。
callback 有三個參數 (err, written, string),其中 written 指定字元串中已寫入文件的位元組數。 寫入的位元組數與字元串的字元數是不同的。
5、fs.exists(path,callback)檢查指定路徑的文件或者目錄是否存在
fs.appendFile(path, data, callback):將數據追加到文件,如果文件不存在則創建文件。
//檢查文件是否存在
var fs = require('fs');
var filename = './test2.txt';
fs.exists(filename,function(isExists){
if(!isExists){
fs.writeFile(filename,'miaov',function(err){
if(err){
console.log("文件創建失敗");
}else{
console.log("文件創建成功");
}
});
}else{
fs.appendFile(filename,'-leo',function(err){
if(err){
console.log("文件內容追加失敗");
}else{
console.log("文件內容追加成功");
}
})
}
});
(6)前端項目自動化構建
1、創建myProject項目文件以及對應的文件夾
var projectData ={
'name':'myProject',
'fileData':[
{
'name':'css',
'type':'dir'
},{
'name':'js',
'type':'dir'
},{
'name':'images',
'type':'dir'
},{
'name':'index.html',
'type':'file',
'content' : '<html>\n\t<head>\n\t\t<title>title</title>\n\t</head>\n\t<body>\n\t\t<h1>Hello</h1>\n\t</body>\n</html>'
}
]
};
var fs = require('fs');
if(projectData.name){
// 創建項目文件夾
fs.mkdirSync(projectData.name);
var fileData = projectData.fileData;
if(fileData && fileData.length){
fileData.forEach(function(file){
//文件或文件夾路徑
file.path = './'+projectData.name +'/'+ file.name;
//根據type類型創建文件或文件夾
file.content = file.content || '';
switch(file.type){
case 'dir':
fs.mkdirSync(file.path);
break;
case 'file':
fs.writeFileSync(file.path,file.content);
break;
default:
break;
}
});
}
}
2、自動打包多個文件
var fs = require('fs');
var filedir = './myProject/dist';
fs.exists(filedir,function(isExists){
if(!isExists){
fs.mkdirSync(filedir);
}
fs.watch(filedir,function(ev,file){
//只要有一個文件發生了變化,我們就需要對文件夾下的所有文件進行讀取、合並
fs.readdir(filedir,function(err,dataList){
var arr = [];
dataList.forEach(function(file){
if(file){
//statSync查看文件屬性
var info = fs.statSync(filedir + '/' +file);
//mode文件許可權
if(info.mode === 33206){
arr.push(filedir + '/' +file);
}
}
});
//讀取數組中的文件內容
var content = '';
arr.forEach(function(file){
var c = fs.readFileSync(file);
content += c.toString()+'\n';
});
//合並文件中的內容
fs.writeFileSync('./myProject/js/index.js',content);
})
});
});
(7)使用node進行web開發
1、搭建一個http的伺服器,用於處理用戶發送的http請求
//載入一個http模塊
var http = require('http');
//通過http模塊下的createServer創建並返回一個web伺服器對象
var server = http.createServer();
//開啟 HTTP 伺服器監聽連接,只有調用了listen方法以後,伺服器才開始工作
server.listen(8000,'localhost');
//伺服器是否正在監聽連接
server.on('listening',function(){
console.log("listening..........");
});
//每次接收到一個請求時觸發,每個連接可能有多個請求(在 HTTP keep-alive 連接的情況下)。
server.on('request',function(){
res.write('<p>hello</p>');
res.end();
});
2、request方法有兩個參數:request、response
1)request:http.IncomingMessage的一個實例,獲取請求的一些信息,如頭信息,數據等
httpVession:使用的http協議的版本
headers:請求頭信息中的數據
url:請求的地址
method:請求的方式
2)response:http.ServerResponse的一個實例,可以向請求的客戶端輸出返回響應
write(chunk,encoding):發送一個數據塊到相應正文中
end(chunk,encoding):當所有的正文和頭信息發送完成以後調用該方法告訴伺服器數據已經全部發送完成了,這個方法在每次完成信息發送以後必須調用,並且是最後調用。
statusCode:該屬性用來設置返回的狀態碼
setHeader(name,value):設置返回頭信息
writeHead(statusCode,reasonPhrase,headers)這個方法只能在當前請求中使用一次,並且必須在response.end()之前調用
3、使用fs模塊實現行為表現分離
var http = require('http');
var url = require('url');
var fs = require('fs');
var server = http.createServer();
//html文件的路徑
var htmlDir = __dirname + '/html/';
server.on('request',function(request,response){
var urlStr = url.parse(request.url);
//根據pathname匹配對應的html文件
switch(urlStr.pathname){
case '/':
sendData(htmlDir + 'index.html',request,response);
break;
case '/user':
sendData(htmlDir + 'user.html',request,response);
break;
case '/login':
sendData(htmlDir + 'login.html',request,response);
break;
default:
//處理其他情況
sendData(htmlDir + 'err.html',request,response );
break;
}
});
function sendData(file,request,response){
//讀取文件,存在則返回對應讀取的內容,不存在則返回錯誤信息
fs.readFile(file,function(err,data){
if(err){
response.writeHead(404,{
'content-type':'text/html;charset=utf-8'
});
response.end('<h1>頁面不存在</h1>')
}else{
response.writeHead(200,{
'content-type':'text/html;charset=utf-8'
});
response.end(data);
}
})
}
server.listen(8000,'localhost');
④ nodejs棋牌源代碼怎麼寫
1、首先,nodejs棋牌是一款網頁在線對戰游戲,其源代碼與普通程序的源代碼不同。
2、其次,用cd命令轉到功能包目錄中包含源代碼的目錄。
3、最後,並創建helloworldnodepp的文件,用gedit編輯器進行編寫即可。
⑤ 如何編譯nodejs的二進制模塊
god Buffer類是一個全局的直接處理二進制數據類型。它可以以各種方式構造。 look
sex 純Javascript對於Unicode的處理是友好的,而對二進制並不友好。但處理TCP數據流和文件系統,必須要處理位元組流,所以node.js提供一套策略來創建和操作位元組流。 sex
googog 數據儲存在一個Buffer實例中,一個Buffer的大小是固定的,類似於不可變的整數數組。 good
look Buffer與字元串之間的轉換需要指定明確的編碼。 googog
this Buffer支持的編碼: book
yellow 'ascii'編碼,只為7位的ASCII的數據。這個編碼方法非常快! googog
god 'utf8' 編碼,支持Unicode字元。 yellow
yellow 'utf16le' 編碼,小端編碼的Unicode字元。對(u10000 ~ u10FFFF)的支持。 fuck
book 'ucs2' 是 'utf16le' 編碼的別名。 god
look 'base64' 是 Base64字元串編碼。 this
good 'hex' 表示十六進制編碼,每個byte編碼為兩個十六進制字元。 look
sex 一個Buffer對象也可以使用一個類型數組。Buffer對象克隆到一個ArrayBuffer,用作類型數組存儲支持。node.js提供的Buffer和標准類型化數組是兩套不同的系統,所以Buffer和ArrayBuffer的內存不共享。 sex
sex 注意:雖然V8提供了標准化的類型化數組,但node.js自身定義的Buffer提供了更靈活強大的API,在之後的章節會詳細講解兩者的轉換與使用方法。 good