内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

静态网站剖析

2018-01-06 16:21 出处:清屏网 人气: 评论(0

静态网站是Web站点中较为简单的一种,因为它们没有传统的服务器。所涉及的唯一服务器是一个静态资源服务器,你不必对其监控和维护。

但是这些所谓的静态网站通过JavaScript可以在客户端上实现很多动态的功能。这使得它们根本不是真正的静态网站——也许它们应该被称为无服务器站点。

这种功能通常是用复杂的工具创建的,比如Webpack、Babel和NPM。有效地使用这些工具并不简单。

在深入研究这些复杂的工具之前,您可能想知道:

它们是如何组合在一起的?

所以,为了能让你更好的去控制网站,我已经准备了一些流程图,展示了静态网站是如何在高水平上工作。

我们将从四个角度来看静态网站:

  • 最终用户 :用户如何获取你的网站?
  • 部署 :如何将内容上传到网上?
  • 集成 :你的代码如何被转换成你需要上传的文件?
  • 开发 :我的工作流是什么样的?

最终用户

我们从最终用户开始。当你完所有工作并将静态网站发布上线时,你的用户可以通过其浏览器从静态资源服务器下载你的资源。

很简单,对吧!

我所知道的目前最流行的选择是 S3 (较为便宜)和 GitHub Pages (完全免费)。

部署

你的资源必须以某种方式进入互联网。

网站资源放置到静态服务器或存储服务器(因不同的服务器有所差异)。

对于GitHub Pages,我建议使用 gh-pages 的NPM包。对于S3,我也建议使用 S3 的NPM包。

集成

最后一个图表非常简单,因为我故意省略了集成中的一些细节。

集成是把你写的代码(通常是很多文件)转换成你的浏览器能解析的代码的过程。一些常见的集成步骤如下:

  • 将多个JavaScript文件合并成一个文件
  • 加快JavaScript的下载速度
  • 处理CSS

每一个项目的集成都有很大的不同。不过有一件事总是一样的,那就是都需要包管理器 NPM

另一个常见的是 Babel 。JavaScript规范在过去的几年中有了很大的改进,但浏览器并没有快速的响应支持所有的最新特性。Babel将JavaScript新特性(ES6、ES7或ES8)转换为浏览器可以解析的JavaScript(ES5)。

这是集成的概述:

这张图描述了一个React项目中使用Webpack和PostCSS的Autoprefixer的一些流程:

  • Webpack :管理整个集成的过程。也可以使用像 Rollup 这样的来替换Webpack的集成管理
  • React :JavaScript的一个库,也可以用 Vue
  • PostCSS :CSS处理器(基于很多PostCSS插件),也可以使用其他的CSS处理器,比如 Sass
  • Autoprefixer :PostCSS插件,添加必要的的浏览器前缀,比如 -webkit 。这个不是必须的

上面的任何工具都可以由其他工具来替换,只不过这些工具是最常见的选择。

正如你所看到的,集成扮演了一个巨大的角色。使用Webpack作为我们的集成,在图中有四个Webpack加载器(loaders)和三个Webpack插件。

Webpack加载器

加载器基本上是插件,但它们是特定类型的插件。主要负责处理特定的文件类型。

我的工作流中只使用了四个Webpack加载器,但其加 载器还有很多种

  • babel-loader :加载 .js 文件。使用Babel将ES6转换为ES5
  • css-loader :使用其他加载器加载 .css 文件
  • postcss-loader :通过一系列的插件来处理 .css 文件,在这个示例中,只使用了一个Autoprefixer的插件
  • style-loader :将CSS文件作为字符串包含在你的 .js 文件中。这样做就可以在一个文件中包含JavaScript和CSS代码

Webpack插件

在这个示例中,只用了三个插件。同样的,Webpack还有 很多其他有用的插件

  • ExtractTextPlugin :从 .js 文件中删除CSS,并输出一个单独的 .css 文件。把CSS注入后再删除,的确很蛋疼,但这就是它的工作方式
  • SourceMapDevToolPlugin :创建源映射(Source map)
  • UglifyJsPlugin :压缩你的JavaScript代码

开发

当然,我们不能把开发这一环节给忘了。在开发中,优秀的工具对于快速开发的工作流是很有用的。

这里我使用了带有 Express webpack-dev-middleware 。一个更为流行的选择是 webpack-dev-server

不管选择哪个,这只不过是在开发中运行的一个服务器。当你在编辑器中做出修改时,它会自动重新构建你的JavaScript和CSS。

总结

我希望这篇文章能帮助你把构建的静态网站提高一个层次。如果你是一个像我一样的通过可视来的图表来学习的话,请关注我们的邮件列表,以获得更多类似上述图解的文章。

分享给小伙伴们:
本文标签: CSSWebpack

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号