零基础如何建立“前端技术体系”？ --本周日晚“先行者课程”，给你示范

昨天的《WEB前端新人，怎么样构建自己的“前端技术体系”？用以在面试中打败其它竞争者》大概的写了下新人如何建立属于自己的前端技术体系，比较简单，正好今晚的先行者课程，就拿它来演示一下。

为什么说要建立属性自己的技术体系呢？前端开发用的技术不都是一样的吗？原因是因为每个人的基础、接受和理解程度不一样，所以每个人走的技术路线都不尽相同。

我个人吧，对于前端技术体系的建立的思路是，从高到低，从顶往下。把大的技术路径连接起来，再往下层层细化，但不要过于深究细节。因为时机不到，过于深入细节会让自己迷失在细节之中。

今天的内容是，把上周日开发的react版倒计时组件，放在node服务中运行，并能加载静态内容，最后用webpack打包压缩。

/////////

内容大体是这样的结构：

这一次的课程，是倒计时组件在nodejs里运行，还有一些webpack打包的讲解。

把nodejs安装之后，我在d盘新建的目录 d:\0416_web

这个目录，就是本次课程中的nodejs的开发目录

要让一个js应用在服务端应用，那么首先要在nodejs中创建一个服务。

nodejs教程，我个人主观，觉得不错。

Node.js 就是运行在服务端的 JavaScript。

目前最主流的三个Web服务器是Apache、Nginx、IIS。

nodeJs它的HTTP模块也可以做服务。

//===========

怎么办？现在就是要创建一个服务。

Node.js 提供了 http 模块，http 模块主要用于搭建 HTTP 服务端和客户端，

使用 HTTP 服务器或客户端功能必须调用 http 模块，

把创建服务的js放在server.js文件中，使用nodejs来运行，

node server.js

//就这样执行

到这里，我们解决了第一个问题，把静态页面放在了nodejs的一个服务上，

去让它在服务端运行。

//==================

Node.js Express 框架

Express 是一个简洁而灵活的 node.js Web应用框架,

提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

我们需要使用express模块，在nodejs中进行安装：

npm install express --save

npm list express，查看版本

//==============

刚才web服务那个例子里，无法加载 css,js 文件？

是因为无法加载css静态文件，

所以我们要使用express，它来设置服务的静态目录

.listen()方法，可以监听浏览器端口的变化，

到这里，我们解决了第二个问题，

是让静态文件能够加载 “静态”资源。

//=================

使用webpack来对文件进行打包，压缩，按需要加载，等功能。

但今天的课程，只针对打包功能进行讲解。

1，一个打包工具

2，一个模块加载工具

简单的讲，1+2 = WebPack

/// 安装webpack

它也是通过 nodejs 的 npm来进行安装，命令如下：

1、全局安装

npm install webpack -g

2、将webpack的安装入你的开发目录，

也就是我今天在D盘新建的0416_web目录中，命令如下：

npm install webpack --save-dev

3、生成package.json文件，描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息。格式必须是严格的JSON格式。

命令如下：

npm init

在本次课程当中，你可以认为它没有什么大用，仅做为了解。

//===========

webpack.config.js，是webpack的config文件，作用是告诉webpack如何把你的项目当中的js文件整合成一个并且附加版本号。

//===========

开始压缩，命令：

WebPack

//============

到这里，第三个问题，就是使用webpack压缩文件，已经解决了。

/////////

笔记内容虽然不多，但只看笔记的话，依然很难在脑子里形成一个线性的过程，要把它画出来，用图连起来，就这样：

图片的展示能力是很强的，这样就能以视觉化的形式，把今天的知识点映射在脑子里，这就是“一条线”。这样的线多了以后，就成了“网”，也就是建立了自己的前端知识体系。

它能解决的最大的问题，就是“能让你看到前端开发的全貌”。也就是我所谓的“谁是谁，哪是哪”。