前端开发回顾一下前端系列文章：Vue学习笔记（一）初识Node.js教程（一）Vue学习笔记的基本概念和基本使用（二）))初识Vue学习笔记（三）JoyfulJavaScript学习笔记（一）Promise与async/waitCSS学习笔记（一）BoxModelNode.js让JavaScript代码在浏览器外运行，同时引入模块提高了复用性的JavaScript。而Vue为我们带来了快速构建大型Web系统的能力：响应式：Vue会自动跟踪JavaScript状态并在DOM发生变化时响应式更新描述最终输出的HTML和JavaScript之间的关系。组件化：提高的是Web项目的复用性，对JavaScript、CSS、HTML进行封装，按需引入。开发web应用，我们可以结合Node.js和Vue.js，引入Vue.js作为依赖，享受npm带来的便利。至于最终的产品，我们可以将其比作服务端应用程序Java。Java最终交付的是一个jar或者war。这个jar或者war被JVM或者Servlet容器（Tomcat）解析出来对外提供服务。Node.js和Vue.js结合之后，最后应该交付什么？对于Java服务端应用，一般都是使用SpringBoot来构建的，对于SpringBoot程序构建的Web应用，会有一个入口。对于web前端，我们是不是也需要一个入口呢？我们目前拥有的是：Vue.CSSSass：CSS的扩展语言在没有系统学习前端的时候我以为这些就够了，但是我忽略的是我是用服务端程序看前端的，所以会有一些盲区。在用Java写服务端应用的时候，开发出来的JDK版本和生产版本是一样的，也就是说你用JDK8开发的代码实际的JDK版本只会是JDK8，不会是JDK7，有些代码JDK8的可能无法在JDK7上运行。如果你使用了JDK8的新特性，只是语法层面的，比如Lambda，但是你想让这段代码运行在JDK7上，其实可以使用retrolambda来转换。如果我使用JDK8新增的类库呢？比如Stream，JDK8才引入的类，其实可以尝试使用streamSupport和ThreeThen来转换。如果只使用JDK7的语法特性和库，可以在编译时加上-source1.7-target指定编译到JDK7版本的class文件。如果不这样做，可能会出现如下异常：java.lang.UnsupportedClassVersionError我们用JavaScript、CSS、HTML构建的页面呢？这些都是浏览器解析的，也就是说我们无法确定用户浏览器的版本，也就是说用户的浏览器可能不支持高版本的JavaScript特性，但是高版本的JavaScript特性是真的很好用，开发的时候总不能低版本写一套，高版本写一套。有没有像Java这样的转换工具，可以把高版本代码等价转换成低版本代码，效果一样？当然有，这就是Babel，那么Babel是什么：Babel是一个工具链，主要用于将ECMAScript2015+语法编写的代码转换为向后兼容的JavaScript语法，使其可以在当前和旧版本的浏览器或其他浏览器上运行环境。语法转换通过Polyfill（我个人倾向于翻译为适配）添加目标环境中缺失的特性（通过引入第三方polyfill模块，如core-js）源码转换下面是Babel的语法转换示例：//Babel输入：ES2015箭头函数[1,2,3].map(n=>n+1);//Babel输出：ES5等价函数[1,2,3].map(function(n){returnn+1;});这篇文章我们不打算完整介绍babel，我们文章的主题是前端工程。回到最后一个问题，web前端页面到底应该以什么形式来传递？我们回顾的是前后端不分离的时代，也就是前端代码在一个项目下。现在这样的项目很少见，但我认为这样的项目会给我们启发。一般用maven构建的项目都会有一个resources文件夹。我们使用这个文件夹来存放配置文件。在这个文件夹下，我们一般有两个文件夹：static、templates：templates放html，static放css、js。一般模板里会直接放一个index.html，也就是首页。进入首页后，跳转到相应页面。那我最后用Vue.js、Node.js、CSS、Sass、Babel开发的浏览器页面也是做成这种形式的？即把js文件放在js文件夹里，css文件放在css文件夹里，图片放在jpg文件夹里，字体放在font文件夹里。这就是webpack所做的。下图来自webpack官网：Webpack将我们构建前端页面所用的各种文件，分类放置到相应的文件夹中，所以Webpack也被称为打包工具。本质上，webpack是一个现代JavaScript应用程序的静态打包工具。当webpack处理一个应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将您的项目需要的每个模块组合成一个或多个bundle，这些bundle是用于显示您的内容的静态资源。bundle对应的中文是：bundle,(one)bag,(one)tie,abatch(similarthingsorgoodsforsale)；有趣的人们;笑话;很多钱。下面是表达这个词的图片：这个bundle怎么理解，或者说什么是modulebundle？##模块捆绑简介什么是模块捆绑？在宏观层面上，模块捆绑只是将一组模块（及其依赖项）以正确的顺序拼接成一个文件（或一组文件）的过程。在JavaScript中，一个模块就是一个文件。脚本是一个模块。模块可以相互加载，并且可以使用特殊指令导出和导入来交换一个模块的函数和调用另一个模块的函数。那么为什么需要一个bundle模块呢？原因是当我们将一个程序分成模块时，我们通常会将这些模块组织到不同的文件和文件夹中，而且通常我们还会从其他库中导入模块，例如Underscore.js或React。因此，页面需要的模块必须包含在主html文件的script标签中，然后在用户访问你的主页时由浏览器加载。onescripttagperfile意味着浏览器必须一个接一个地加载文件，一个接一个意味着需要一定的时间，一次加载对应一个HTTP请求。为了解决这个问题，我们将所有文件捆绑或链接成一个大文件（或多个文件，视情况而定）以减少请求数。另一种提速的方法是减少代码大小并从源代码中删除不需要的字符，例如空格、注释、换行符等。由于JavaScript的原生模块化来得比较晚，因此JavaScript社区有几种不同的模块系统。如果您使用的是非原生模块系统，例如CommonJS或AMD，您需要使用特殊工具将这些模块转换为浏览器。对于更友好的代码，这就是Browserify、RequireJS、WebPack和其他打包工具发挥作用的地方。除了合并模块之外，模块打包器还提供了许多附加功能，例如在更改代码时自动重新编译代码。前端工程说了这么多，前端工程在哪里？或者我们换一种方式来理解前端工程。前端工程是一个复合词，前端+工程，那么什么是工程呢？或者让我们回顾一下软件工程的简史：70年代和80年代的软件危机。在那个时代，很多软件都以悲惨的结局告终，软件项目的开发时间远远超过了计划的时间表。一些项目造成了财产损失，甚至一些软件造成了生命损失。同时，软件开发人员也发现软件开发越来越难。Therac-25事故在软件工程界被广泛引用：在1985年6月至1987年1月期间，有6起已知的医疗事故是由于错误地过量服用Therac-25，导致患者死亡或死亡。严重的辐射灼伤。鉴于软件开发中遇到的困难，北约于1968年召开了第一次软件工程学术会议，提出“软件工程”来定义软件开发所需的相关知识，并提出“软件开发应类似于工程活动”.软件工程自1968年正式提出以来，在此期间积累了大量成功的研究成果和广泛的技术实践。在学术界和工业界的共同努力下，软件工程正逐步发展成为一门专业学科。关于软件工程的定义，在GB/T11457-2006《消息技术 软件工程术语》中定义为“应用计算机科学理论和技术，以及工程管理原理和方法，实现软件产品的定义和开发，满足根据预算和进度的用户需求。”Therac-25：是继Therac-6和Therac-20机组后，加拿大原子能有限公司（AECL）于1982年生产的电脑控制放射治疗机。对患者造成比正常高出数百倍，导致死亡或重伤。软件的复杂性使项目时间超过计划时间，造成一定程度的财产损失。出现质量不可控，造成人员伤亡。这导致软件工程，而软件工程的目标是控制进度和质量，随着软件开发难度越来越大，这也是软件工程需要解决的问题，对应的就是代码复用、版本管理、开发协同。这就是软件工程，我觉得前端工程也是因为这样的问题，所以引入工程方法来解决c相应的问题。针对页面越来越复杂的情况，需要加快开发进度，保证质量。这是前端工程和软件工程的共同追求，如何加快开发进度？也就是引入工具，自动化，把一些重复的需求变成工具，减少对程序员的依赖。这就是打包工具出现的原因，比如webpack和Babel。加快开发进程的另一个原因是为了增强代码的可重用性，这就是模块化，将功能封装成模块，不需要重复开发。这用于控制质量和进度。不管前端如何，需求如何变化，工程的追求永远是速度和质量，开发速度让我想到了工具。项目越大，工具就越多，将会有更多的标准流程。因此，随着软件的发展，应该有越来越多的工具进入软件开发，需求会趋向于拆分，以方便分工。写在最后说实话，这篇文章的初衷是从软件工程的定义中推导出打包工具，但是对于工程来说这方面并没有明确的定义，所以也没办法做数学证明，给定一定的条件来证明结论的一定正确性。后来觉得工程化更像是代码量增加后的自然选择，即实现自动化，避免重复操作，复用性高，质量好，进度快。引入了各种工具和概念来实现这些前端。关于模块合并的部分主要参考：《JavaScript Modules: A beginner’s guide》。文末有链接，非常值得一看。参考资料什么是前端工程？https://juejin.cn/post/691744...用JDK7写的代码：能用JDK8编译用JRE7运行吗？https://www.zhihu.com/questio...我对前端工程的理解https://juejin.cn/post/684490...Babel是什么？https://www.babeljs.cn/docs/JavaScript模块：新手指南https://www.preethikasireddy....
