专栏首页web前端教室零基础如何建立“前端技术体系”? --本周日晚“先行者课程”,给你示范

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

昨天的《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压缩文件,已经解决了。

/////////

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

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

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

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-04-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端新人学习中的陌生感是如何产生的,以及解决思路。

    今天在给零基础班的同学们讲nodeJs的时候,也许是讲课讲到一定程度了吧,突然一下就能体会到他们面对一个“新东西”的时候的那种陌生感、疏离感了。一定程度上能够感...

    web前端教室
  • 对于零基础同学来讲,javascript有多难掌握?

    你是零基础,那么你用什么方式,可以快速的实现js的运用自如呢? Javascript是一门脚本语言,它没有复杂的内存管理,只有一个进程,变量随便什么都可以储存...

    web前端教室
  • 学前端这个事儿,你是怎么个打算呢?

    这是我和一个同学的聊天截图,聊天内容很有代表性,就是知道要学习,知道要努力,但是,然后会怎么样?并不是很清楚。图中的这个哥们已经毕业有一些年头了,但他在面对跨行...

    web前端教室
  • Webpack(一):安装和基础配置

    之前急着搭建博客,所以 Nodejs 安装好后就没管了,今天 webpack -v 命令死活用不了(提示“webpack 不是内部命令”),才发现是因为当时忘记...

    Chor
  • webpack 项目 css/js主域重试

    为了提高网站的访问速度,现在一般会将静态资源放在 CDN 下,而不是放在网站的域名之下。以腾讯课堂为例,其域名为 ke.qq.com,打开控制台,访问 ke.q...

    IMWeb前端团队
  • webpack 项目 css/js主域重试

    为了提高网站的访问速度,现在一般会将静态资源放在 CDN 下,而不是放在网站的域名之下。以腾讯课堂为例,其域名为 ke.qq.com,打开控制台,访问 ke....

    IMWeb前端团队
  • 从0开始发布一个无依赖、高质量的npm

    没有发布过npm包的同学,可能会对NPM对开发有一种蜜汁敬畏,觉得这是一个很高大上的东西。甚至有次面试,面试官问我有没有发过npm包,当时只用过还没写过,我想应...

    用户2356368
  • Webpack2入门

    kongxx
  • webpack(4.8.3)总结

    前言:webpack4从入门到高阶配置,本文先讲述webpack4的安装、基础配置、进阶配置,高阶配置放置下篇讲述。

    wade
  • webpack(4.8.3)总结之一

    前言:webpack4从入门到高阶配置,本文先讲述webpack4的安装、基础配置、进阶配置,高阶配置放置下篇讲述。

    wade

扫码关注云+社区

领取腾讯云代金券