#前端准备：前端理解你过了吗？前端基础设施和硬核介绍技术栈的选择首先，我们在搭建前端架构的时候需要对前端生态系统了如指掌，最好有一定的技术前瞻性。一个好的技术架构，以后可能会很容易扩展，减少重构的次数，即使重构了，也没有必要开战。我在选择技术栈的时候一般会参考以下三点：1、SEO是不是很重要，提出自己业务的需求？主要针对：手机还是PC？您有开发应用程序的计划吗？遇到这样的问题，我们可以带着问题着重选择一些技术方案比较成熟的技术栈来解决这个问题。2、是否成熟，文档友好？这里是在之前的开发过程中的一个实际经验。当时为了优化用户体验，节省开发效率，选择了MVVM轻量级框架。遗憾的是，当时没有决定权，CTO选择了模式。当时avalon之所以没有选择backbone，主要是因为没有成熟的中文文档。考虑到团队的机动性和易用性，暂时没有考虑。最终选择了司徒正妹的avalon，在当时还是比较前卫的。以哪个网络为首的大公司都在使用它。我们用的时候avalon2刚出，直接用2.0的。在使用过程中也遇到了一些问题：文件离散，一张一张，有后处理，生态少，扩展不划算。有时我们会遇到难以想象的问题。为了找到bug的原因，我翻了好几遍demo和文档找到了答案，但是没有keymark。当然当时确实提高了我们的一些开发效率，但我当时可能更喜欢Angular或者Vue。因为他们拥有无与伦比的生态系统、针对各种问题的技术解决方案以及完备的开发者文档。值得一提的是，avalon的作者是兼职维护的。如果全栈运营，相信会比现在好很多，多看看avalon的源码，也会对自己有很大的提升。对生产的技术选择更加谨慎。3.了解它的生态系统上面说的生态系统，以我比较常用的vue为例，目前只有vue的官方开发给我们提供了vuex,vue-router,vue-loader,vue-cli,vuepress,vue-以devtools和vue-ssr为首的开源项目有89个，其中包括无数vue相关的UI库，vue插件，甚至近两年淘宝提供的Hybrid：weex支持的相关开源项目多达167752个今天github上的vue，angular相关的有416811个，react相关的有594272个。统计时间2018-09-01我觉得有了这样的生态支持，完全可以满足我们95%以上的中小型项目的需求。比较谁强是没有意义的。因为熟悉，所以敢于选择vue作为我们SPA的主要架构4.画出我们期望的前端基础架构模型，因为上一章我们选择了Vue。如果只考虑前端，我们最初的想法：技术栈大概是这样的：在node和webpack的支持下，将vue组件构建打包成传统元素，发布到http服务，后端服务被要求。那么可能是这样的：随着主流的第三方库和尝鲜技术越来越多，客户端的需求，或者被动【不得不用】，或者主动引用babellesssass*.loader等组件和混合图书馆。后面的技术栈需要我们在踩坑之后逐步完善。针对浏览器兼容性、速度优化、SEO、通信协议等具体问题，可能是polyfilllazyloadingxssprotobuf等。所以前期不需要考虑太多。我们只需要知道我们可以解决这个问题，但我们现在不需要考虑。有的同学太“完美”了，想不出好点子，却动手做了。几天不做，完美主义害死人。了解WebpackWebPack可以看作是一个模块打包机，它可以分析你的项目结构，找到JavaScript模块和其他浏览器不能直接运行的扩展语言：Stylus、Scss、less、TypeScript、CoffeeScript等，并进行转换并打包成适合浏览器使用的格式。比较常用的热更新也可以通过webpack-dev-server来开发。WebPack是一个模块化的开发解决方案。webpack在处理一个应用的时候，会递归构建一个依赖图（dependencygraph），里面包含了应用程序需要的各个模块，然后将这些模块全部打包成一个或者多个bundle，webpack可以支持各种语言和预处理器来编写模块通过加载器，最后打包成一个（或多个）浏览器可识别的JavaScriptcss文件目前支持的加载器列表理解ES6的官方声明ECMAScript6（简称ES6）是2015年6月正式发布的JavaScript语言标准，正式命名为ECMAScript2015（ES2015）。它的目标是使JavaScript语言能够用于编写复杂的大型应用程序。很多科普的人总是对ES一头雾水。ES8作为ES6的第一个版本于2015年6月发布。正式名称为《ECMAScript 2015 标准》（简称ES2015），是2011年ECMAScript5.1之后的6.0版本。2016年6月，略微改版的《ECMAScript 2016 标准》（简称ES2016）【因为改动小，其实是6.1版本，但有些人愿意称它为ES7，不标准]《ECMAScript 2017 标准》（简称ES2017）2017年6月发布【因为改动不大，其实是6.2版本，但也有人愿意称它为ES8，不标准]就像Kubernetes一样，人们给他取名K8S（K和S之间有8个字），他不标准了解BabelTraceurBabel，Traceur是一个编译JavaScript的平台，它可以编译代码帮助你实现如下：JavaScript.next-to-JavaScript-of-today编译器使用未来的JavaScript发布日期今天（2018-09-04），没有完全支持ES6的JavaScript代理（无论是浏览器环境还是服务器环境），因此开发者热衷于使用该语言的最新功能需要将ES6代码转换为ES5代码。允许您使用最新的JavaScript代码（ES6、ES7...），无论当前使用的浏览器是否完全支持新标准；ES7的作者已经没有精力去看了，但是Bable逐渐取代了Google的Traceur成为了主流，我是外行所以选择Bable了解SassLessStylusSass是不是违反了中国的广告法？？Sass、Stylus和Less等预处理器是原生CSS的扩展。它们允许您使用CSS中不存在的变量、嵌套、混合、继承等特性来编写CSS。CSS预处理器可以使用这些特殊的Type语句将其转换为浏览器可识别的CSS语句。一张表比较三种语言语言实现特点赋值和缩进SassRuby变量$以$var开头：value不需要LessJavaSript变量@以@var开头：value不需要StylusNodeJs不能使用@以var开头：10你可能很熟悉现在有了它，正如上面关于WebPack的所说：webpack可以通过配置相关的加载器来使用。以下是常用的CSS处理加载器：LessLoaderSassLoaderStylusLoader自己找：加载器列表like：哪个语言比较好，用的比较多，比较简单容易争论的博主不想讨论。了解Electron可以使用：JavaScript、HTML和CSS来构建跨平台桌面应用程序的框架取决于您的喜好。它也是一种混合型。主要场景是PC端，没什么好说的。值得一提的是，VisualStudioCode、Atom、GithubDesktop都是基于此构建的。有时按CMD+option+i会让你大吃一惊。基于Electron开发的APP列表总结了这些基本都是前端常用的主流技术栈。构图的骨架是现在，各种webpack插件和各种工具库的选择会随着项目的实际引入而更好，现在大家记不住了。别着急，实战中的前端架构比现在复杂多了，跟我来一步步来吧。下一章为大家实战：《如何快速构建项目并升级为一个规范的前端骨架》关于我目前正在写《从零构建前后分离项目》系列，在此基础上更正和补充，不断更新的项目实践地址上一篇《从零构建前后分离 WEB 项目》前言-开源的意义《从零构建前后分离web项目》：开篇-纵观WEB的历史演进《从零构建前后分离web项目》探索-深入谈前后端架构分离《从零构建前后分离web项目》准备-前端理解过了吗？前端基础设施和技术介绍
