大公司里怎样开发和部署前端代码？
-
开发时的和部署时类库的引用和存放是一致还是不同?开发时候用的源码开发，部署的时候用的压缩后的，性能优化！模块放在项目中还是放在CDN之类服务器?你说的模块是JS类库吗？对于前端的js和css文件放在独立的服务器就行，主要设置缓存，减少客户端的重复请求压力；渲染网页用Nginx还是其他动态语言的Web服务器?前端页面的渲染都是浏览器来处理的，至于动态语言的运行，看你用的什么开发语言来配置环境，Nginx和apache是用来运行php语言的，iis运行asp和c#,tomcate运行java语言制作网页的流程,是现有设计师的稿,还是先看模块?当然先看模块，有交互设计师做出原型，然后是设计人员根据原型做设计搞，最后是前端做页面，最后是开发人员嵌入程序；会选择用自己写的模块还是从社区寻找模块?根据需求来，复杂的模块可以采用第三方的，简单的可以自己直接写；
-
开发时的和部署时类库的引用和存放是一致还是不同?开发环境和部署环境的类库代码都是相同的，但物理位置不同。部署环境的类库在CDN上，开发环境的类库在开发服务器上。模块放在项目中还是放在CDN之类服务器?模块放在项目中，部署时都在CDN上。渲染网页用Nginx还是其他动态语言的Web服务器?前面用ngnix做负载均衡，后面用apache做web服务器。制作网页的流程,是现有设计师的稿,还是先看模块?先有设计师的稿再写模块，但很多时候并不需要设计师，因为架子已经搭好了，界面规范和基础元素都有，一般的界面前端工程师都能搞得定。会选择用自己写的模块还是从社区寻找模块?基础框架用的YUI3，大部分二次开发的底层模块，还有和业务紧密结合的UI模块都是自己写的。当然也会用社区写的模块，比如上传组件、highcharts、Ace等。如果说怎么选择模块的话，那就是具体情况具体分析了，总体原则有两个：能不自己写，就不自己写；选择最符合需求的，一般来说，要么选最好的，要么选最快出结果的
-
和项目相关的重要关键词有以下，虽然看起来和题目关联不大，但是最后的方案选择，往往与这些因素都相关：项目类型主要职责范围内的活是什么类型的工作量主要在纯前端部分的活（移动/PC）工作量除了处理前端外，还需要处理服务端的活（各种形式的前后端交互数据）是否需要迁就项目终端受众，简而言之，对内对外，开发和受众谁强势谁弱势是一版之后再无新版，还是需要持续维护，慢慢做大的类型，是否可以将项目作为实验项目或者培养新人练手任务人力资源项目可投入的人力资源有谁，分别是什么角色，团队伙伴的技能
-
1.开发环境的被动式资源服务。我们的开发环境是一个叫做ads的服务，在github上找得到，没说开源，但是都是public的项目。这个环境跑在每个人的机器和测试环境的机器和线上的机器上。支撑了大搜车所有环境的静态服务。其实它做的工作比较简单，无非是一个静态文件服务器+一些实时处理。原理也比较简单，被动式处理，当你访问一个文件的时候，就会去寻找这个文件的需要经过的处理中间件，让文件以管道的形式通过这些中间件，最后返回一个处理过的文件内容。例如jade和less，我们项目里没有编译和打包的概念，你就写就行了，然后任何环境里访问index.css其实都返回的是index.less的编译结果，打包的过程和配置，都不需要关心。包括jade，less，js压缩，requrejs打包合并都是用这样的方式开发，你写的是这样，你看到的是另一样，简单粗暴，每个人只需要关心自己需要关心的事情，而不是项目的配置和打包之类的事情。这个环境也无需配置，直接githubclone下来，nodeapp.js跑一下就再也不用管了。2.如何开发和测试？测试环境。通过切换host，我们有一个测试的域名，叫做http://f2e.souche.com。默认这个域名是指向一台前端单独的测试服务器的，通过nginx，转发到一个ads的服务上。然后这个服务的背后是我们的前端资源文件，这个项目里还跑了一个定时脚本，一分钟pull一次从github更新代码。所以http://f2e.souche.com直接访问，访问的就是测试环境，这个环境的代码永远是最新的，它会定时从github拉取最新的代码。这个环境主要用来支撑测试和开发访问网站的测试环境时候访问到的前端资源的服务支撑。本地开发。通过切换host，把http://f2e.souche.com切换到127.0.0.1，然后就把服务指向了本地的ads服务，本地的ads访问的是本地的资源项目，所以任何修改直接会生效。3.动态路径和时间戳自动更新在java程序中，我们实现了两个跟前端资源有关的机制。动态路径。我们的java程序会根据环境的不同判断来引用不同环境的资源文件，例如测试和线上，自动引用不同路径的资源。时间戳自动更新。我们前端维护了一个resource.properties，这个文件是一个时间戳的kv。每次发布一个文件，就让他对应的时间戳+1。然后java里会定时去远程读取这个文件，如果读取成功，就把这个kv解析到内存覆盖之前的时间戳map，然后每次渲染模板的时候，会把对应的时间戳通过方法注入到模板中，模板中所有的资源引用都会根据这个时间戳配置动态改变资源的时间戳。4.线上CDN和发布线上我们也有一台前端自己的服务器，专门用来跑ads支撑线上服务。每个请求进来（http://assets.souche.com是指向cdn的），会先通过阿里的cdn服务，然后如果cdn上有缓存副本，就会直接返回，如果没有，则会去请求一台（http://f2e-assets.souche.com不经过cdn)这台是前端的线上服务，这台服务器上的ads跟开发和测试环境的ads一模一样，会动态处理，jade,less,js压缩合并，requirejs打包，图片自动优化。发布，就简单了，就是简单的文件拷贝，我们有个专门的发布服务，也是nodejs写的，会记录每次发布的时间内容，然后copy文件过去，并且更新上面提到的resource.properties。这样就能自动更新时间戳了。5.combo等个性化服务。因为采用上述的架构，所以我们可以灵活定制我们的静态服务，因为我们中间有一层cdn，后面架设了一个动态服务，这个动态服务是无所不能的。例如combo，这样的url：http://assets.souche.com/assets/js/$$lib/jquery-1.7.1.min.js,lib/require.js,lib/jquery.flexslider-min.js实现起来很简单，后台收到请求的时候解析下路径，把文件动态压缩一下，然后合并返回给前端即可，没啥好说的，但是就是够方便。6.被动式服务的性能。因为ads是被动式服务，它的好处是傻瓜化，坏处是有时候可能会有性能问题，还好我们可以适当规避。例如常用的服务：jade,less,js压缩合并，requirejs打包，图片自动优化其中jade,less的实时编译是非常快的，基本感觉不出来，所以这两个可以忽略。js合并压缩，requirejs打包，图片优化是比较慢的。所以在本地开发和测试环境的时候，这几个服务是关闭掉的。也就是我们的js只有在线上才是压缩的，本地都是不压缩的，当然访问路径都是一样一样的。requirejs也不打包，本地和测试都采用异步加载，到了线上才会使用打包出来的文件。所有的所有，都没有中间文件，所以在我们的前端项目里，看不到css文件，看不到压缩后的js文件，看不到jade编译出来的html，看不到requirejs打包的文件，也看不到优化后的图片文件。因为所有的一切都是被动式。而在线上，所有的性能问题都不是问题了，因为有cdn，所以服务不会一直被请求，请求一次之后就被cdn缓存，再慢的服务，也是没有问题的。7.后言大概先说这些，一直以来从来没跟别人讲过公司的前端工程环境，今天废话了一通。最近正在搞一个比较特立独行的前后端分离，思路跟其他公司稍微不同，前后端分离最重要的不是技术实现，而是因为涉及到了整个公司的开发架构，需要为前端，开发，测试，都定制一套傻瓜化的开发环境和解决方案，重新制定开发流程，又涉及到产品运营等等，这些的推动才是最复杂的，中间要解决很多问题，不能说为了技术而技术，要为每个职责解决问题才能够推动整个项目。
-
每一家大公司都不一样，你只能寻找适合自己的流程。一般来说，大公司面临的问题就是复杂度。这就如同说，简单的问题，你用汇编写也肯定写得出来，但更复杂的问题就需要用高级语言来抽象，否则其复杂度无法管理。此外，编译不仅仅是能执行就可以，还要考虑目标平台的执行效率。对于大公司来说，用CDN是必然的，只是如何尽可能多地把静态资源放到CDN上去。对于图片这种数量有限的资源，一般新增多少都会放到CDN而不在乎成本。至于JavaScript这类打包方案有无穷组合的资源，则需要特别的优化了。最笨的办法，当然是人手划定几个基本的打包方案，然后在CDN上部署。如果组合数有限，把所有打包方案都缓存到CDN也是可以的（没有人请求的打包方案就不生成了）。更先进的办法是，统计实际请求的打包方案，然后自动生成优化的打包方案，并且缓存在CDN上。考虑到各家大公司采用的语言不一样，用什么服务器也是不确定的。甚至在一家公司内不同语言的系统用的服务器就不一样。同理，不同团队的合作方式不一样，导致了设计到实现的流程也不一样。就算在同一家公司内，也有可能同时存在最保守的团队和最敏捷的团队，一边必须设计定稿了才开始写第一行代码，另一边想到什么写什么觉得不好看再找设计师调整。大公司一般都不会非常多的依赖于开源项目，而是自己做自己的项目然后开源。一方面这是NotInventedHere的问题；另一方面，确实通用的开源项目无法满足某一家公司非常特定的某些需求，所以就算idea是很好的，大公司也会把idea搬过来再结合自己的需求做一个自己的版本。
-
模块放在项目中还是放在CDN之类服务器？内部依赖模块放到项目中，公共模块放CDN。其实这么描述有些抽象，但是也给了开发者足够的自由。渲染网页用Nginx还是其他动态语言的Web服务器？现在貌似这个问题没什么好讨论的。本地开发环境最好和服务端架构保持一致，现在服务端是Node，本地肯定也是Node。制作网页的流程，是先有设计师的稿，还是先看模块？最理想的情况下，设计师应当花比较多的时间和前端一起维护一套模块UI规范，然后设计师设计页面的时候，也必须根据这个模块UI规范来。所有有个性化的调整，都应当考虑是不是应当补充回到UI规范中，保证整体视觉的一致性体验。当然，总有不合适和一些特殊场景下的视觉稿，就单独处理好了。所以应该是在设计师的稿子上体现模块，而不是到前端才来看哪些模块和视觉稿能匹配上。会选择用自己写的模块还是从社区寻找模块？对于模块，社区方案一定是非常棒的，所以在没有现成的情况下，非常建议引入社区模块，并在引入之后维护起来。后面一点维护起来非常重要，引入一个模块很简单，维护起来就不是了，或许你会发现这个社区模块有一些bug，或者是部分不满足需求，去修改并改善这个模块比重写一个模块要求更高，难度更大（你要理解其他开发者为什么要这么写代码）。完成之后提MR到社区也是对社区的贡献。自己写的情况也有，但更多还是要考虑自己写的意义在哪里，一般在社区模块落后于你对模块的思考和规划时，自己写是一个好的选择。
回答请先登录