十次方专属社交平台前端系统开发-前端环境搭建 _全局

我们在命令提示符下输入命令
node demo4.js
服务启动后，我们打开浏览器，输入网址
:8888/
即可看到网页输出结果Hello World
心情是不是很激动呢？Ctrl+c 终止运行。
2.3.5理解服务端渲染
我们创建demo5.js ，将上边的例子写成循环的形式
var http = require('http'); http.createServer(function (request, response) {// 发送 HTTP 头部// HTTP 状态值: 200 : OK// 内容类型: text/plainresponse.writeHead(200, {'Content‐Type': 'text/plain'});// 发送响应数据 "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/');
我们在命令提示符下输入命令启动服务
node demo5.js
浏览器地址栏输入:8888即可看到查询结果。
我们右键“查看源代码”发现，并没有我们写的for循环语句，而是直接的10条Hello World
，这就说明这个循环是在服务端完成的，而非浏览器（客户端）来完成。这与我们原来的JSP很是相似。
2.3.6接收参数
创建demo6.js
var http = require('http'); var url = require('url');http.createServer(function(request, response){ response.writeHead(200, {'Content‐Type': 'text/plain'});// 解析 url 参数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/');
我们在命令提示符下输入命令
node demo6.js
在浏览器测试结果
3包资源管理器NPM
3.1什么是NPM
npm全称Node ，他是node包管理和分发工具。其实我们可以把NPM
理解为前端的Maven .
我们通过npm 可以很方便地下载js库，管理前端工程.
最近版本的node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本
3.2NPM命令
3.2.1初始化工程
init命令是工程初始化命令。
建立一个空文件夹，在命令提示符进入该文件夹执行命令初始化
npm init
按照提示输入相关信息，如果是用默认值则直接回车即可。
name: 项目名称
: 项目版本号
: 项目描述
: {Array}关键词，便于用户搜索到我们的项目
最后会生成.json文件，这个是包的配置文件，相当于maven的pom.xml 我们之后也可以根据需要进行修改。
3.2.2本地安装
命令用于安装某个模块，如果我们想安装模块（node的web框架），输出命令如下：
npm install express
出现黄色的是警告信息，可以忽略，请放心，你已经成功执行了该命令。在该目录下已经出现了一个文件夹和-lock.json 文件夹用于存放下载的js库（相当于maven的本地仓库）
-lock.json是当或 .json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。
我们再打开.json文件，发现刚才下载的已经添加到依赖列表中了.
关于版本号定义：
指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。波浪号（tilde）+指定版本：比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x ，也就是说安装时不改变大版本号和次要版本号。插入号（caret）+指定版本：比如?1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。latest：安装最新版本。
3.2.3全局安装
刚才我们使用的是本地安装，会将js库安装在当前目录，而使用全局安装会将库安装到你的全局目录下。
如果你不知道你的全局目录在哪里，执行命令
npm root ‐g
我的全局目录在C:Users\\npm 比如我们全局安装, 输入以下命令
npm install jquery ‐g
3.2.4批量下载
我们从网上下载某些代码，发现只有.json,没有文件夹，这时我们需要通过命令重新下载这些js库.
进入目录（.json所在的目录）输入命令
npm install
此时， npm会自动下载.json中依赖的js库.
3.2.5淘宝NPM镜像
有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令，进行全局安装淘宝镜像。
npm install ‐g cnpm ‐‐registry=https://registry.npm.taobao.org
安装后，我们可以使用以下命令来查看cnpm的版本
cnpm ‐v
使用cnpm
cnpm install 需要下载的js库
3.2.6运行工程
如果我们想运行某个工程，则使用run命令如果.json中定义的脚本如下
dev是开发阶段测试运行
build是构建编译工程lint 是运行js代码检测
我们现在来试一下运行dev
npm run dev
3.2.7编译工程
我们接下来，测试一个代码的编译.编译后我们就可以将工程部署到nginx中啦~
编译后的代码会放在dist文件夹中，首先我们先删除dist文件夹中的文件,进入命令提示符输入命令
npm run build
生成后我们会发现只有个静态页面，和一个文件夹
这种工程我们称之为单页Web应用（ page web ，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
这里其实是调用了来实现打包的，关于我们后续的章节进行介绍
4.1什么是
是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。接下来我们简单为大家介绍的安装与使用
4.安装

文章插图

文章插图
全局安装
npm install webpack ‐gnpm install webpack‐cli ‐g
安装后查看版本号
webpack ‐v
4.3快速入门
4.3.1JS打包
（1）创建src文件夹，创建bar.js
exports.info=function(str){ document.write(str);}
（2）src下创建logic.js
exports.add=function(a,b){ return a+b;}
（3）src下创建main.js
var bar= require('./bar');var logic= require('./logic');bar.info( 'Hello world!'+ logic.add(100,200));
（4）创建配置文件..js，该文件与src处于同级目录
var path = require("path"); module.exports = {entry: './src/main.js', output: {path: path.resolve( dirname, './dist'), filename: 'bundle.js'}};
以上代码的意思是：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的
js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为.js
（5）执行编译命令
webpack
执行后查看.js 会发现里面包含了上面两个js文件的内容
（7）创建index.html ,引用.js

测试调用index.html，会发现有内容输出
4.3.2CSS打包
（1）安装style-和 css-
本身只能处理模块，如果要处理其他类型的文件，就需要使用进行转换。
可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过来加载任何类型的模块或文件，比如、 JSX、 LESS 或图片。首先我们需要安装相关插件，css- 是将 css 装载到；style- 是让认识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文件夹创建css文件夹,css文件夹下创建css1
body{ background:red;}
（4）修改main.js，引入css1.css
require('./css1.css');
（5）重新运行
（6）运行index.html看看背景是不是变成红色啦？
5开发工具
5.简介
（Code）是微软出的一款轻量级代码编辑器，重要的是它在, OS X 和Linux操作系统的桌面上均可运行。Code内置了对, 和Node.js语言的支持，并且为其他语言如C++, C#, , PHP等提供了丰富的扩展库和运行时。
5.安装与配置
5.2.1安装
官网下载
默认安装即可
5.2.2插件安装
可以通过安装插件来使编辑器变的更加强大以下为前端开发工程师常用插件
（1）HTML
超级实用且初级的 H5代码片段以及提示
（2）HTML CSS
让 html 标签上写class 智能提示当前项目所支持的样式新版已经支持scss文件检索
（3） for
让映射的 debug功能，静态页面都可以用来打断点调试，真
666~
（4）vetur
vue框架所需的插件语法高亮、智能感知、Emmet等
（5）代码片段
5.2.3配置自动保存
点击菜单：文件–勾选自动保存
6ES6
6.1什么是ES6
编程语言是的实现和扩展。是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。定义了：语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
类型 – 布尔型、数字、字符串、对象等。
原型和继承
内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。
标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。
标准的历史版本分别是1、2、3、5 。
那么为什么没有第4版？其实微信web开发者工具使用，在过去确实曾计划发布提出巨量新特性的第4版微信web开发者工具使用，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。
ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5
版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“”，因此，ES5规范中包含这样两句话
是一门充满活力的语言，并在不断进化中。
未来版本的规范中将持续进行重要的技术改进
2009年发布的改进版本ES5 ，引入了.()、.()、
和、严格模式以及JSON对象。
6.0（以下简称ES6）是语言的下一代标准， 2015年6月正式发布。它的目标，是使得语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
6.2Node.js中使用ES6
ES6+ 太棒了,但是很多高级功能node是不支持的,就需要使用babel转换成ES5
（1）babel转换配置,项目根目录添加. 文件
"presets" : ['es2015']
（2）安装es6转换模块
cnpm install babel‐preset‐es2015 ‐‐save‐dev
（3）全局安装命令行工具
cnpm install babel‐cli ‐g
（4）使用
babel‐node js文件名
6.3语法新特性
【十次方专属社交平台前端系统开发-前端环境搭建】本文到此结束，希望对大家有所帮助。