十次方專(zhuān)屬社交平臺(tái)前端系統(tǒng)開(kāi)發(fā)-前端環(huán)境搭建 _全局

我們?cè)诿钐崾痉螺斎朊?br /> node demo4.js
服務(wù)啟動(dòng)后，我們打開(kāi)瀏覽器，輸入網(wǎng)址
:8888/
即可看到網(wǎng)頁(yè)輸出結(jié)果Hello World
心情是不是很激動(dòng)呢？Ctrl+c 終止運(yùn)行。
2.3.5理解服務(wù)端渲染
我們創(chuàng)建demo5.js ，將上邊的例子寫(xiě)成循環(huán)的形式
var http = require('http'); http.createServer(function (request, response) {// 發(fā)送 HTTP 頭部// HTTP 狀態(tài)值: 200 : OK// 內(nèi)容類(lèi)型: text/plainresponse.writeHead(200, {'Content‐Type': 'text/plain'});// 發(fā)送響應(yīng)數(shù)據(jù) "Hello World" for(var i=0;i<10;i++){response.write('Hello Worldn');}response.end('');}).listen(8888);// 終端打印如下信息console.log('Server running at http://127.0.0.1:8888/');
我們?cè)诿钐崾痉螺斎朊顔?dòng)服務(wù)
node demo5.js
瀏覽器地址欄輸入:8888即可看到查詢(xún)結(jié)果。
我們右鍵“查看源代碼”發(fā)現(xiàn)，并沒(méi)有我們寫(xiě)的for循環(huán)語(yǔ)句，而是直接的10條Hello World
，這就說(shuō)明這個(gè)循環(huán)是在服務(wù)端完成的，而非瀏覽器（客戶(hù)端）來(lái)完成。這與我們?cè)瓉?lái)的JSP很是相似。
2.3.6接收參數(shù)
創(chuàng)建demo6.js
var http = require('http'); var url = require('url');http.createServer(function(request, response){ response.writeHead(200, {'Content‐Type': 'text/plain'});// 解析 url 參數(shù)var params = url.parse(request.url, true).query; response.write("name:" + params.name); response.write("n");response.end();}).listen(8888);console.log('Server running at http://127.0.0.1:8888/');
我們?cè)诿钐崾痉螺斎朊?br /> node demo6.js
在瀏覽器測(cè)試結(jié)果
3包資源管理器NPM
3.1什么是NPM
npm全稱(chēng)Node ，他是node包管理和分發(fā)工具。其實(shí)我們可以把NPM
理解為前端的Maven .
我們通過(guò)npm 可以很方便地下載js庫(kù) ，管理前端工程.
最近版本的node.js已經(jīng)集成了npm工具，在命令提示符輸入 npm -v 可查看當(dāng)前npm版本
3.2NPM命令
3.2.1初始化工程
init命令是工程初始化命令。
建立一個(gè)空文件夾，在命令提示符進(jìn)入該文件夾執(zhí)行命令初始化
npm init
按照提示輸入相關(guān)信息，如果是用默認(rèn)值則直接回車(chē)即可。
name: 項(xiàng)目名稱(chēng)
: 項(xiàng)目版本號(hào)
: 項(xiàng)目描述
: {Array}關(guān)鍵詞，便于用戶(hù)搜索到我們的項(xiàng)目
最后會(huì)生成.json文件，這個(gè)是包的配置文件，相當(dāng)于maven的pom.xml 我們之后也可以根據(jù)需要進(jìn)行修改。
3.2.2本地安裝
命令用于安裝某個(gè)模塊，如果我們想安裝模塊（node的web框架），輸出命令如下：
npm install express
出現(xiàn)黃色的是警告信息，可以忽略，請(qǐng)放心，你已經(jīng)成功執(zhí)行了該命令。在該目錄下已經(jīng)出現(xiàn)了一個(gè)文件夾和-lock.json 文件夾用于存放下載的js庫(kù)（相當(dāng)于maven的本地倉(cāng)庫(kù)）
-lock.json是當(dāng)或 .json 發(fā)生變化時(shí)自動(dòng)生成的文件。這個(gè)文件主要功能是確定當(dāng)前安裝的包的依賴(lài)，以便后續(xù)重新安裝的時(shí)候生成相同的依賴(lài) ，而忽略項(xiàng)目開(kāi)發(fā)過(guò)程中有些依賴(lài)已經(jīng)發(fā)生的更新。
我們?cè)俅蜷_(kāi).json文件，發(fā)現(xiàn)剛才下載的已經(jīng)添加到依賴(lài)列表中了.
關(guān)于版本號(hào)定義：
指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式規(guī)定，安裝時(shí)只安裝指定版本。波浪號(hào)（tilde）+指定版本：比如~1.2.2，表示安裝1.2.x的最新版本（不低于1.2.2），但是不安裝1.3.x ，也就是說(shuō)安裝時(shí)不改變大版本號(hào)和次要版本號(hào) 。插入號(hào)（caret）+指定版本：比如?1.2.2，表示安裝1.x.x的最新版本（不低于1.2.2），但是不安裝2.x.x，也就是說(shuō)安裝時(shí)不改變大版本號(hào) 。需要注意的是，如果大版本號(hào)為0，則插入號(hào)的行為與波浪號(hào)相同，這是因?yàn)榇藭r(shí)處于開(kāi)發(fā)階段，即使是次要版本號(hào)變動(dòng)，也可能帶來(lái)程序的不兼容。latest：安裝最新版本。
3.2.3全局安裝
剛才我們使用的是本地安裝，會(huì)將js庫(kù)安裝在當(dāng)前目錄，而使用全局安裝會(huì)將庫(kù)安裝到你的全局目錄下。
如果你不知道你的全局目錄在哪里，執(zhí)行命令
npm root ‐g
我的全局目錄在C:Users\\npm 比如我們?nèi)职惭b, 輸入以下命令
npm install jquery ‐g
3.2.4批量下載
我們從網(wǎng)上下載某些代碼，發(fā)現(xiàn)只有.json,沒(méi)有文件夾，這時(shí)我們需要通過(guò)命令重新下載這些js庫(kù).
進(jìn)入目錄（.json所在的目錄）輸入命令
npm install
此時(shí) ， npm會(huì)自動(dòng)下載.json中依賴(lài)的js庫(kù).
3.2.5淘寶NPM鏡像
有時(shí)我們使用npm下載資源會(huì)很慢，所以我們可以安裝一個(gè)cnmp(淘寶鏡像)來(lái)加快下載速度。
輸入命令，進(jìn)行全局安裝淘寶鏡像。
npm install ‐g cnpm ‐‐registry=https://registry.npm.taobao.org
安裝后，我們可以使用以下命令來(lái)查看cnpm的版本
cnpm ‐v
使用cnpm
cnpm install 需要下載的js庫(kù)
3.2.6運(yùn)行工程
如果我們想運(yùn)行某個(gè)工程，則使用run命令如果.json中定義的腳本如下
dev是開(kāi)發(fā)階段測(cè)試運(yùn)行
build是構(gòu)建編譯工程lint 是運(yùn)行js代碼檢測(cè)
我們現(xiàn)在來(lái)試一下運(yùn)行dev
npm run dev
3.2.7編譯工程
我們接下來(lái)，測(cè)試一個(gè)代碼的編譯.編譯后我們就可以將工程部署到nginx中啦~
編譯后的代碼會(huì)放在dist文件夾中，首先我們先刪除dist文件夾中的文件,進(jìn)入命令提示符輸入命令
npm run build
生成后我們會(huì)發(fā)現(xiàn)只有個(gè)靜態(tài)頁(yè)面，和一個(gè)文件夾
這種工程我們稱(chēng)之為單頁(yè)Web應(yīng)用（ page web ，SPA），就是只有一張Web頁(yè)面的應(yīng)用，是加載單個(gè)HTML 頁(yè)面并在用戶(hù)與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。
這里其實(shí)是調(diào)用了來(lái)實(shí)現(xiàn)打包的，關(guān)于我們后續(xù)的章節(jié)進(jìn)行介紹
4.1什么是
是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。
從圖中我們可以看出，可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁(yè)面的請(qǐng)求。接下來(lái)我們簡(jiǎn)單為大家介紹的安裝與使用
4.安裝

文章插圖

文章插圖
全局安裝
npm install webpack ‐gnpm install webpack‐cli ‐g
安裝后查看版本號(hào)
webpack ‐v
4.3快速入門(mén)
4.3.1JS打包
（1）創(chuàng)建src文件夾，創(chuàng)建bar.js
exports.info=function(str){ document.write(str);}
（2）src下創(chuàng)建logic.js
exports.add=function(a,b){ return a+b;}
（3）src下創(chuàng)建main.js
var bar= require('./bar');var logic= require('./logic');bar.info( 'Hello world!'+ logic.add(100,200));
（4）創(chuàng)建配置文件..js，該文件與src處于同級(jí)目錄
var path = require("path"); module.exports = {entry: './src/main.js', output: {path: path.resolve( dirname, './dist'), filename: 'bundle.js'}};
以上代碼的意思是：讀取當(dāng)前目錄下src文件夾中的main.js（入口文件）內(nèi)容，把對(duì)應(yīng)的
js文件打包，打包后的文件放入當(dāng)前目錄的dist文件夾下，打包后的js文件名為.js
（5）執(zhí)行編譯命令
webpack
執(zhí)行后查看.js 會(huì)發(fā)現(xiàn)里面包含了上面兩個(gè)js文件的內(nèi)容
（7）創(chuàng)建index.html ,引用.js

測(cè)試調(diào)用index.html，會(huì)發(fā)現(xiàn)有內(nèi)容輸出
4.3.2CSS打包
（1）安裝style-和 css-
本身只能處理模塊，如果要處理其他類(lèi)型的文件，就需要使用進(jìn)行轉(zhuǎn)換。
可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù) ，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。這樣，我們就可以通過(guò)來(lái)加載任何類(lèi)型的模塊或文件，比如、 JSX、 LESS 或圖片。首先我們需要安裝相關(guān)插件，css- 是將 css 裝載到；style- 是讓認(rèn)識(shí)css
cnpm install style‐loader css‐loader ‐‐save‐dev
（2）修改..js
var path = require("path"); module.exports = {entry: './src/main.js', output: {path: path.resolve( dirname, './dist'), filename: 'bundle.js'},module: {rules: [{test: /.css$/,use: ['style‐loader', 'css‐loader']}]}};
（3）在src文件夾創(chuàng)建css文件夾,css文件夾下創(chuàng)建css1
body{ background:red;}
（4）修改main.js，引入css1.css
require('./css1.css');
（5）重新運(yùn)行
（6）運(yùn)行index.html看看背景是不是變成紅色啦？
5開(kāi)發(fā)工具
5.簡(jiǎn)介
（Code）是微軟出的一款輕量級(jí)代碼編輯器，重要的是它在, OS X 和Linux操作系統(tǒng)的桌面上均可運(yùn)行。Code內(nèi)置了對(duì), 和Node.js語(yǔ)言的支持，并且為其他語(yǔ)言如C++, C#, , PHP等提供了豐富的擴(kuò)展庫(kù)和運(yùn)行時(shí) 。
5.安裝與配置
5.2.1安裝
官網(wǎng)下載
默認(rèn)安裝即可
5.2.2插件安裝
可以通過(guò)安裝插件來(lái)使編輯器變的更加強(qiáng)大以下為前端開(kāi)發(fā)工程師常用插件
（1）HTML
超級(jí)實(shí)用且初級(jí)的 H5代碼片段以及提示
（2）HTML CSS
讓 html 標(biāo)簽上寫(xiě)class 智能提示當(dāng)前項(xiàng)目所支持的樣式新版已經(jīng)支持scss文件檢索
（3） for
讓映射的 debug功能，靜態(tài)頁(yè)面都可以用來(lái)打斷點(diǎn)調(diào)試，真
666~
（4）vetur
vue框架所需的插件語(yǔ)法高亮、智能感知、Emmet等
（5）代碼片段
5.2.3配置自動(dòng)保存
點(diǎn)擊菜單：文件–勾選自動(dòng)保存
6ES6
6.1什么是ES6
編程語(yǔ)言是的實(shí)現(xiàn)和擴(kuò)展。是由ECMA（一個(gè)類(lèi)似W3C的標(biāo)準(zhǔn)組織）參與進(jìn)行標(biāo)準(zhǔn)化的語(yǔ)法規(guī)范。定義了：語(yǔ)言語(yǔ)法 – 語(yǔ)法解析規(guī)則、關(guān)鍵字、語(yǔ)句、聲明、運(yùn)算符等。
類(lèi)型 – 布爾型、數(shù)字、字符串、對(duì)象等。
原型和繼承
內(nèi)建對(duì)象和函數(shù)的標(biāo)準(zhǔn)庫(kù) – JSON、Math、數(shù)組方法、對(duì)象自省方法等。
標(biāo)準(zhǔn)不定義HTML或CSS的相關(guān)功能，也不定義類(lèi)似DOM（文檔對(duì)象模型）的Web API，這些都在獨(dú)立的標(biāo)準(zhǔn)中進(jìn)行定義。涵蓋了各種環(huán)境中JS的使用場(chǎng)景，無(wú)論是瀏覽器環(huán)境還是類(lèi)似node.js的非瀏覽器環(huán)境。
標(biāo)準(zhǔn)的歷史版本分別是1、2、3、5 。
那么為什么沒(méi)有第4版？其實(shí)微信web開(kāi)發(fā)者工具使用，在過(guò)去確實(shí)曾計(jì)劃發(fā)布提出巨量新特性的第4版微信web開(kāi)發(fā)者工具使用，但最終卻因想法太過(guò)激進(jìn)而慘遭廢除（這一版標(biāo)準(zhǔn)中曾經(jīng)有一個(gè)極其復(fù)雜的支持泛型和類(lèi)型推斷的內(nèi)建靜態(tài)類(lèi)型系統(tǒng)）。
ES4飽受爭(zhēng)議，當(dāng)標(biāo)準(zhǔn)委員會(huì)最終停止開(kāi)發(fā)ES4時(shí)，其成員同意發(fā)布一個(gè)相對(duì)謙和的ES5
版本，隨后繼續(xù)制定一些更具實(shí)質(zhì)性的新特性。這一明確的協(xié)商協(xié)議最終命名為“”，因此，ES5規(guī)范中包含這樣兩句話
是一門(mén)充滿(mǎn)活力的語(yǔ)言，并在不斷進(jìn)化中。
未來(lái)版本的規(guī)范中將持續(xù)進(jìn)行重要的技術(shù)改進(jìn)
2009年發(fā)布的改進(jìn)版本ES5 ，引入了.()、.()、
和、嚴(yán)格模式以及JSON對(duì)象。
6.0（以下簡(jiǎn)稱(chēng)ES6）是語(yǔ)言的下一代標(biāo)準(zhǔn) ， 2015年6月正式發(fā) 布。它的目標(biāo)，是使得語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。
6.2Node.js中使用ES6
ES6+ 太棒了,但是很多高級(jí)功能node是不支持的,就需要使用babel轉(zhuǎn)換成ES5
（1）babel轉(zhuǎn)換配置,項(xiàng)目根目錄添加. 文件
"presets" : ['es2015']
（2）安裝es6轉(zhuǎn)換模塊
cnpm install babel‐preset‐es2015 ‐‐save‐dev
（3）全局安裝命令行工具
cnpm install babel‐cli ‐g
（4）使用
babel‐node js文件名
6.3語(yǔ)法新特性
【十次方專(zhuān)屬社交平臺(tái)前端系統(tǒng)開(kāi)發(fā)-前端環(huán)境搭建】本文到此結(jié)束，希望對(duì)大家有所幫助。