1. 什么是前端工程化
自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展，但是前端整体的工程生态并没有同步跟进。目前绝大多数的前端团队仍然使用非常原始的“切图（FE）-&套模板（RD）”的开发模式，这种模式下的前端开发虽说不是刀耕火种的原始状态，但是效率非常低下。
前端的工程化问题与传统的软件工程虽然有所不同，但是面临的问题是一样的。我们首先回顾一下传统的软件开发流程模型：
上图中的运行和维护并不是串行关系，也并非绝对的并行关系。维护贯穿从编码到运行的整个流程。
如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是面向编码的，那么工程化要解决的是如何提高整个系统生产效率。所以，与其说软件工程是一门科学，不如说它更偏向于管理学和方法论。
软件工程是个很宽泛的话题，每个人都有自己的理解。以上是笔者个人的理解，仅供参考。
具体到前端工程化，面临的问题是如何提高编码-&测试-&维护阶段的生产效率。
可能会有人认为应该包括需求分析和设计阶段，上图展示的软件开发模型中，这两个阶段具体到前端开发领域，更恰当的称谓应该是功能需求分析和UI设计，分别由产品经理和UI工程师完成。至于API需求分析和API设计，应该包括在编码阶段。
2. 前端工程化面临的问题
要解决前端工程化的问题，可以从两个角度入手：开发和部署。
从开发角度，要解决的问题包括：
提高开发生产效率；
降低维护难度。
这两个问题的解决方案有两点：
制定开发规范，提高团队协作能力；
分治。软件工程中有个很重要的概念叫做模块化开发其中心思想就是分治。
从部署角度，要解决的问题主要是资源管理，包括：
代码审查；
压缩打包；
增量更新；
单元测试；
要解决上述问题，需要引入构建/编译阶段。
2.1 开发规范
开发规范的目的是统一团队成员的编码规范，便于团队协作和代码维护。开发规范没有统一的标准，每个团队可以建立自己的一套规范体系。
值得一提的是JavaScript的开发规范，尤其是在ES2015越来越普及的局面下，保持良好的编码风格是非常必要的。笔者推荐。
2.2 模块/组件化开发
2.2.1 模块还是组件？
很多人会混淆模块化开发和组件化开发。但是严格来讲，组件（component）和模块（module）应该是两个不同的概念。两者的区别主要在颗粒度方面。《Documenting Software Architectures》一书中对于component和module的解释如下：
A module tends to refer first and foremost to a design-time entity. ... information hiding as the criterion for allocating responsibility to a module.
A component tends to refer to a runtime entity. ... The emphasis is clearly on the finished product and not on the design considerations that went into it.
In short, a module suggests encapsulation properties, with less emphasis on the delivery medium and what goest on at runtime. Not so with components. A delivered binary maintains its &separateness& throughout execution. A component suggests independently deployed units of software with no visibility into the development process.
简单讲，module侧重的是对属性的封装，重心是在设计和开发阶段，不关注runtime的逻辑。module是一个白盒；而component是一个可以独立部署的软件单元，面向的是runtime，侧重于产品的功能性。component是一个黑盒，内部的逻辑是不可见的。
用通俗的话讲，模块可以理解为零件，比如轮胎上的螺丝钉；而组件则是轮胎，是具备某项完整功能的一个整体。具体到前端领域，一个button是一个模块，一个包括多个button的nav是一个组件。
模块和组件的争论由来已久，甚至某些编程语言对两者的实现都模糊不清。前端领域也是如此，使用过bower的同行知道bower安装的第三方依赖目录是bower_component；而npm安装的目录是node_modules。也没必要为了这个争得头破血流，一个团队只要统一思想，保证开发效率就可以了。至于是命名为module还是component都无所谓。
笔者个人倾向组件黑盒、模块白盒这种思想。
2.2.2 模块/组件化开发的必要性
随着web应用规模越来越大，模块/组件化开发的需求就显得越来越迫切。模块/组件化开发的核心思想是分治，主要针对的是开发和维护阶段。
关于组件化开发的讨论和实践，业界有很多同行做了非常详细的介绍，本文的重点并非关注组件化开发的详细方案，便不再赘述了。笔者收集了一些资料可供参考：
3. 构建&编译
严谨地讲，构建（build）和编译（compile）是完全不一样的两个概念。两者的颗粒度不同，compile面对的是单文件的编译，build是建立在compile的基础上，对全部文件进行编译。在很多Java IDE中还有另外一个概念：make。make也是建立在compile的基础上，但是只会编译有改动的文件，以提高生产效率。本文不探讨build、compile、make的深层运行机制，下文所述的前段工程化中构建&编译阶段简称为构建阶段。
3.1 构建在前端工程中的角色
在讨论具体如何组织构建任务之前，我们首先探讨一下在整个前端工程系统中，构建阶段扮演的是什么角色。
首先，我们看看目前这个时间点（2016年），一个典型的web前后端协作模式是什么样的。请看下图：
上图是一个比较成熟的前后端协作体系。当然，目前由于Node.js的流行开始普及大前端的概念，稍后会讲述。
自Node.js问世以来，前端圈子一直传播着一个词：颠覆。前端工程师要借助Node.js颠覆以往的web开发模式，简单说就是用Node.js取代php、ruby、python等语言搭建web server，在这个颠覆运动中，JavaScript是前端工程师的信心源泉。我们不讨论Node.js与php们的对比，只在可行性这个角度来讲，大前端这个方向吸引越来越多的前端工程师。
其实大前端也可以理解为全栈工程师，全栈的概念与编程语言没有相关性，核心的竞争力是对整个web产品从前到后的理解和掌握。
那么在大前端模式下，构建又是扮演什么角色呢？请看下图：
大前端体系下，前端开发人员掌握着Node.js搭建的web server层。与上文提到的常规前端开发体系下相比，省略了mock server的角色，但是构建在大前端体系下的作用并没有发生改变。也就是说，不论是大前端还是“小”前端，构建阶段在两种模式下的作用完全一致，构建的作用就是对静态资源以及模板进行处理，换句话说：构建的核心是资源管理。
3.2 资源管理要做什么？
前端的资源可以分为静态资源和模板。模板对静态资源是引用关系，两者相辅相成，构建过程中需要对两种资源使用不同的构建策略。
目前仍然有大多数公司将模板交由后端开发人员控制，前端人员写好demo交给后端程序员“套模板”。这种协作模式效率是非常低的，模板层交由前端开发人员负责能够很大程度上提高工作效率。
3.2.1 静态资源构建策略
静态资源包括js、css、图片等文件，目前随着一些新规范和css预编译器的普及，通常开发阶段的静态资源是：
es6/7规范的文件；
less/sass等文件（具体看团队技术选型）；
[可选]独立的小图标，在构建阶段使用工具处理成spirit图片。
构建阶段在处理这些静态文件时，基本的功能应包括：
es6/7转译，比如babel；
将less/sass编译成css；
spirit图片生成；
以上提到的几个功能可以说是为了弥补浏览器自身功能的缺陷，也可以理解为面向语言本身的，我们可以将这些功能统称为预编译。
除了语言本身，静态资源的构建处理还需要考虑web应用的性能因素。比如开发阶段使用组件化开发模式，每个组件有独立的js/css/图片等文件，如果不做处理每个文件独立上线的话，无疑会增加http请求的数量，从而影响web应用的性能表现。针对诸如此类的问题，构建阶段需要包括以下功能：
依赖打包。分析文件依赖关系，将同步依赖的的文件打包在一起，减少http请求数量；
资源嵌入。比如小于10KB的图片编译为base64格式嵌入文档，减少一次http请求；
文件压缩。减小文件体积；
hash指纹。通过给文件名加入hash指纹，以应对浏览器缓存引起的静态资源更新问题；
代码审查。避免上线文件的低级错误；
以上几个功能除了压缩是完全自动化的，其他两个功能都需要人工的配置。比如为了提升首屏渲染性能，开发人员在开发阶段需要尽量减少同步依赖文件的数量。
以上提到的所有功能可以理解为工具层面的构建功能。
以上提到的构建功能只是构建工具的基本功能。如果停留在这个阶段，那么也算是个及格的构建工具了，但也仅仅停留在工具层面。对比目前较流行的一些构建产品，比如fis，它具备以上所得的编译功能，同时提供了一些机制以提高开发阶段的生产效率。包括：
文件监听。配合动态构建、浏览器自动刷新等功能，提高开发效率；
mock server。并非所有前端团队都是大前端（事实上很少团队是大前端），即使在大前端体系下，mock server的存在也是很有必要的；
我们也可以将上面提到的功能理解为平台层面的构建功能。
3.2.2 模板的构建策略
模板与静态资源是容器-模块关系。模板直接引用静态资源，经过构建后，静态资源的改动有以下几点：
url改变。开发环境与线上环境的url肯定是不同的，不同类型的资源甚至根据项目的CDN策略放在不同的服务器上；
文件名改变。静态资源经过构建之后，文件名被加上hash指纹，内容的改动导致hash指纹的改变。
其实url包括文件名的改动，之所以将两者分开论述是为了让读者区分CDN与构建对资源的不同影响。
对于模板的构建宗旨是在静态资源url和文件名改变后，同步更新模板中资源的引用地址。
现在有种论调是脱离模板的依赖，html由客户端模板引擎渲染，简单说就是文档内容由JavaScript生成，服务端模板只提供一个空壳子和基础的静态资源引用。这种模式越来越普遍，一些较成熟的框架也驱动了这个模式的发展，比如React、Vue等。但目前大多数web产品为了提高首屏的性能表现，仍然无法脱离对服务端渲染的依赖。所以对模板的构建处理仍然很有必要性。
具体的构建策略根据每个团队的情况有所差异，比如有些团队中模板由后端工程师负责，这种模式下fis的资源映射表机制是非常好的解决方案。本文不讨论具体的构建策略，后续文章会详细讲述。
模板的构建是工具层面的功能。
3.2.3 小结
构建可以分为工具层面和平台层面的功能：
预编译，包括es6/7语法转译、css预编译器处理、spirit图片生成；
依赖打包；
资源嵌入；
文件压缩；
hash指纹；
代码审查；
模板构建。
文件监听，动态编译；
mock server。
一个完整的前端工程体系应该包括：
统一的开发规范；
组件化开发；
构建流程。
开发规范和组件化开发面向的开发阶段，宗旨是提高团队协作能力，提高开发效率并降低维护成本。
构建工具和平台解决了web产品一系列的工程问题，旨在提高web产品的性能表现，提高开发效率。
随着Node.js的流行，对于前端的定义越来越宽泛，在整个web开发体系中。前端工程师的角色越来越重要。本文论述的前端工程体系没有涉及Node.js这一层面，当一个团队步入大前端时代，前端的定义已经不仅仅是“前端”了，我想Web工程师这个称号更合适一些。
之前跟一位前端架构师讨论构建中对于模块化的处理时，他提到一个很有意思的观点：所谓的压缩打包等为了性能做出的构建，其实是受限于客户端本身。试想，如果未来的浏览器支持大规模并发请求、网络延迟小到微不足道，我们还需要压缩打包吗？
诚然，任何架构也好，策略也好，都是对当前的一种解决方案，并不是一条条铁律。脱离了时代，任何技术讨论都没有意义。
阅读(...) 评论()60+个百度产品线/项目
30+外部公司
类css风格的配置语法
FIS3采取了类似CSS语法一样的配置风格，易于理解与上手。编译配置不再枯燥而令人生畏，构建项目变得如此简单。
Glob语法扩展
不会写正则？不用怕，FIS3不仅提供了友好易用的Glob匹配语法，更扩展了分组功能，再没有更简单易用的文件匹配了。
面向开发的目录规范
FIS3强大的资源定位和内嵌等能力让你能真正面向开发定义利于维护的目录规范，同时能适配任意服务器的发布需求。一份代码，多种发布。迁移变得如此简单！
自动依赖分析
FIS3通过依赖声明自动分析资源依赖，支持适配CommonJS/AMD/CMD等多种模块化规范;类似WebPack依赖打包变得更加简单
强大的静态资源管理
FIS3绝不仅是Task管理工具，其核心思想在于整站强大的静态资源管理能力。无论是按需加载、组件内嵌、BigRender、Quickling等方案都能快速实施
与后端框架的无缝结合
FIS3将静态资源管理能力延伸到后端框架，无论是PHP的、smarty，Nodejs，还是JAVA的velocity，都有相应的解决方案支持
丰富的脚手架与组件仓库，自动监听、本地预览，让您的页面快速Run起来
丰富的脚手架和组件仓库，让您快速上手
提供本地调试服务器，方便快速预览、本地数据模拟等功能。支持文件监听、自动刷新，您的每次改动都能快速呈现在页面中
方便的资源定位机制、css语法般的目录和发布配置，让您保持高可维护性的开发目录结构不变同时，轻松适配任意服务器部署的目录要求
自动雪碧图
雪碧图通过合并文件减少网络请求，提升页面加载性能。
FIS能根据CSS中的文件引用，有力提升css开发效率
资源内嵌，文件校验、压缩、合并
内容嵌入可以为工程师提供诸如图片base64嵌入到css、js里，前端模板编译到js文件中，将js、css、html拆分成几个文件最后合并到一起的能力
通过简单的几行配置便能完成资源校验、压缩、合并工作
更多开源编译工具应有尽有还不够？快速
模块化开发
模块化是提升网站可维护性、功能复用性的重要手段，它能实现积木式的搭建网页。
FIS提供了ModJS模块化方案让用户无需关注模块化方案细节，只需像NodeJS一样简单的声明模块依赖便能轻松完成模块化工作，支持同步、异步的加载方式和依赖的管理。
无缝支持AMD/CMD等规范
FIS同样支持开源的AMD/CMD等规范，通过自动化编译简化现有模块化方案的开发和依赖的分析管理等工作，让用户更专注于功能开发。
更简单的依赖打包机制
FIS在分析过程中获取了整个项目模块化资源的依赖分析工作，使得诸如webpack的依赖打包和管理变得更加简单。
同样您可以自定义打包插件来自由扩展，例如
作为FIS静态资源管理的核心，通过它不仅能灵活适配modjs/AMD/CMD等模块化方案，更能方便地扩展实现更多应用。
静态资源管理应当能适配php、java等各种后端方案，通过与后端的结合更好的实现网站资源的管理。
按需加载、延迟加载、预加载等多种方式灵活控制，从性能优化角度出发优化首屏渲染等页面展现性能。
我们的项目&>&如何构建后现代前端工程化开发体系.pdf
如何构建后现代前端工程化开发体系.pdf
上传大小：7.5MB
如何构建后现代前端工程化开发体系.pdf
o 需求:定义数据结构 +假数据测试 + 记录接口文档
o 推荐:postman
o 线上服务:easy-mock.com
o 本地服务:steamer-plugin-mock
数据上报与错误监控
o 难点:数据并发量 + 数据处理 + 服务器运维 o 整合:SDK
o 取代方案:
o 产品:百度统计 or 腾讯统计 o 性能:wetest
o 报错:sentry.io
综合评分：0
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
如何构建后现代前端工程化开发体系.pdf
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
举报的资源分：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*详细原因：
如何构建后现代前端工程化开发体系.pdf&nbsp&nbsp &
&nbsp&nbsp
&nbsp&nbsp &
&nbsp&nbsp
介绍RStudioServer是RStudio公司打造的一款基于Web的开源编辑器,如果你熟悉RStudio的桌面版本,那么使用RStudioServer对你来说基本上没什么难度。在实际的工程中,我们的服务器大多是基于Linux的,比如常见的ubuntu、centos等。这些操作系统有时并不提供图形化界面,这时候RStudio的服务器版本就派上用场了。启动RStudioServer后,进入在浏览器中进入某一个页面后就可以像桌面版一样使用RStudio编辑器。当R的代码在服务器
将iOS项目进行子工程化在iOS项目开发中,随着项目的越来越大,工程的结构化会变差,编译的速度也会越来越慢。使用静态库或动态库的方式来构建子工程不仅可以加快项目的编译速度,从结构上,也优化了项目的组织。有两种方式来来对项目进行子工程化,可以在项目中创建子项目,也可以创建并列的项目,建立项目依赖。需要注意,无论哪种方式,你都应该尽量保证子工程不要用到主工程中的内容,如果必须这样做,你可以采用代理或其他回调编程方式来转交给主工程自己处理。一、创建子工程的一个示例使用Xcode新建
Django项目前端工程化的探索不通过node层实现非SPA网页开发的前后端分离。技术栈:webpack+jade+es6+scss+swig等项目git:webpack-django-starter需求项目需求公司官网。SEO很重要页面简单,基本是几台页面,个别页面有动态内容后台是Django成品beta版(虽然有广告之嫌):http://www.bsy365.com/我们从前怎么做?之前开发过的一些多页面网站都是在Djangotemplate目录下直接写Django模板(
0模型训练之后当模型在几百万次迭代之后终于收敛,在验证集表现的也不错之后,是时候可以把它做成真正的服务了。c++登场……..以下代码可以保存一个最简单的图模型:y=a*x+b(标量)importtensorflowastfdefsave():x=tf.placeholder(dtype=tf.float32,shape=[],name='x')withtf.variable_scope('beginner'):a=tf.Variable(initial_value=.1,na
最近金拱门比较火,我们先戳开它的官网看看。看完后,如果你老板要是让你做这么一个网站,一定要seo,一定要兼容IE,你会怎么去做呢?用vue/react吧,单页应用满足不了seo,而且IE兼容性不好。上node中间层做服务端渲染又把事情搞麻烦了。只能用JQuery干,但是又该怎么做工程化呢?好像也不是很容易。因为目前大家的工程化方案多是一整套单页应用全家桶,如vue-cli的webpack模板。而前端到如今这个阶段,再让大家接手一个没有工程化的项目,肯定内心非常抵触了。试想这么
作者:张伟,饿了么前端工程师,目前参与饿了么物流平台前端业务迭代,关注前端技术发展,业余也研究Java、Node.js等服务端开发技术,推崇各种自动化。责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net。本文为《程序员》原创文章,未经允许不得转载,更多精彩文章请订阅《程序员》。作为Web开发的重要组成部分,CSS技术演进也在推动着前端工程化不断进步。本文将从CSS模块化、namespace约束、CSSinJS方案三个方面逐步深入解读CSS在
你要的移动web前端都在这里!大前端方向:移动Web前端、Native客户端、Node.js、大前端框架:React、Vue.js、Koa&跨终端技术:HTML5、CSS3、JavaScript跨平台框架:ReactNative、Cordova前端工程化:Grunt、Gulp、Webpack前端预编译:Babel、Sass、Less自动化测试:Jasmine、Mocha、Karma一图在手,应有尽有!更多信息参考:https://item.jd.com/121703
架构的目的是什么?答案是提升质量和效率。一个项目组成分为前端,服务端。传统的前端项目用三剑客javascripthtmlcss就传统的项目结构已经不能满足日益壮大的大型应用的需求了。现在前端的生态圈很繁荣,各种框架,组件的出现。让前端发展迅速,快速开发已经成为了前端的一个标准。如果你想构建一个易维护,代码简洁,性能优化程度高的项目就离不开前端的架构。这也就解疑了架构是不是必须的?架构的目的是什么?答案是提升质量和效率。在没有架构的情况下:举个例子:一个程序员来写各个页面,但是
引言提到前端往往很多人的映像就是入门简单,HTML、CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图、布局、扣特效的前端新同学在向前发展的路上越来越觉得吃力,而没有任何编程思想和软件开发基础很多人对前端工程化、组件化、模块化、MVC这些“高大上”的词汇云里雾里。本文用最简单的语言介绍一下我对工程化、组件化、模块
引言提到前端往往很多人的映像就是入门简单,HTML、CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图、布局、扣特效的前端新同学在向前发展的路上越来越觉得吃力,而没有任何编程思想和软件开发基础很多人对前端工程化、组件化、模块化、MVC这些“高大上”的词汇云里雾里。本文用最简单的语言介绍一下我对工程化、组件化、模块
临时有个bug要修复——图文无关历史状况WEB前端开发这几年发展非常迅速,非常多的开发框架和构建工具涌现,可能你昨天还在用的工具、插件,到了今天就过时了。在2年前,我面试别人的时候,会问一些有没有接触NodeJS、Grunt、gulp、ES6、Babel这类技能的问题,超过半数的面试者会回答『没有』,或者说『只是刚刚接触,并不是很深入』。迫于招人急迫,我并不会直接说NO,然后继续问一些HTML、CSS、JS前端三板斧的知识。然而今年,如果应聘者不会这些技能,那真的很抱歉,我不
机缘巧合,年初的时候,老师叫我找师兄交接一下VisMooc的代码,我本以为今年Deadline要负责相关开发,因为项目比较脏乱,于是便赶在春节前把整个系统重写了一遍,后将过程记录整理成文,欢迎交流探讨。0.交待背景VisMooc是组里的一个大项目,主要是给在线教育网站的各种数据提供可视化的分析工具,可以算是一个webapp。最初由丛磊师兄带头创立并实现完成,从0.5版本发展到现在较为稳定的2.0版本,集合了屈老师以及很多师兄师姐的智慧和汗水,为组里赢得了无数的荣誉与名声,可以
这篇,我们要解决上篇留下的两个问题:webpack如何自动发现entry文件及进行相应的模板配置如何直接处理后端模板的样式、脚本自动引入问题目录结构以express项目为例,使用express-generator构建一个初始项目,然后再添加需要的目录,最终的目录架构如下:-website-bin#express项目启动文件-lib#express项目开发所需的库+routes#express项目路由-src#前端源码开发目录-styles#css目录,按照页面(模块)、通用、
丛书内容本系列在《设计模式——基于C#的工程化实现及扩展》的基础上充实完成,本系列本次版本面向C#开发者和Java开发提供如下4册图书:o模式——工程化实现及扩展(设计模式C#版)o模式——工程化实现及扩展(架构模式C#版)o模式——工程化实现及扩展(设计模式Java版)o模式——工程化实现及扩展(架构模式Java版)其中C#版采用C#3/4的编码风格和.NETFramework3.5/4.0内置的类库编写,面向使用C#的专门人员;而Java版本采用ORACLEJDK6的编码
模式——工程化实现及扩展(设计模式Java版)王翔,孙逊著ISBN978-7-121-年4月出版定价:59.00元16开416页内容简介设计模式不是一门适合空谈的技术,它来自于开发人员的工程实践又服务于工程实践。本书并不是一本面向入门者的读物,因为它需要结合工程实践介绍如何发现模式灵感、如何应用模式技术。不过作为一本介绍设计模式的书,它并不需要读者对于庞大的JDK有深入了解,因为扩展主要是结合Java语法完成的,配合书中的实例,相信读者不仅能够熟练应用设
转载请加说明:http://my.oschina.net/panpcui/blog/671921,谢谢引言现今,越来越多的前端集成开发工具涌现,个人觉得特别有必要让前端开发更规范、更系统、更高效。规范:让前端开发的编码规范统一,系统:让从构建、开发、集成到测试等这个开发流程更加完善,高效:让前端开发团队效率显著提升。本文是基于Yeoman:Yo+grunt/gulp+bower搭建前端工程(NodeJS环境下):(1)简单了解Yeoman:Yo+grunt/gulp+bowe
项目在最初应用MobX时,对较为复杂的多人协作项目的数据流管理方案没有一个优雅的解决方案,通过对MobX官方文档中针对大型可维护项目最佳实践的学习和应用,把自己的理解抽象出一个简单的todoMVC应用,供大家交流和讨论。搭建开发环境安装Dawn要求Node.jsv7.6.0及以上版本。$[sudo]npminstalldawn-g初始化工程$dawninit-tfront这里我选择使用无依赖的front模板,便于自定义我的前端工程。目录结构分析由dawn工具生成的项目目录如下
Vue项目架构设计与工程化实践文中会讲述我从0~1搭建一个前后端分离的vue项目详细过程Feature:一套很实用的架构设计通过cli工具生成新项目通过cli工具初始化配置文件编译源码与自动上传CDNMock数据反向检测serverapi接口是否符合预期前段时间我们导航在开发一款新的产品,名叫快言,是一个主题词社区,具体这个产品是干什么的就不展开讲了,有兴趣的小伙伴可以点进去玩一玩~这个项目的1.0乞丐版上线后,需要一个管理系统来管理这个产品,这个时候我手里快言项目的功能已经
在实现egg+vue服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章:在&Webpack工程化解决方案easywebpack&文章中我们提到了基于Vue构建的解决方案&easywebpack-vue.easywebpack-vue支持纯前端模式和Node层构建,这为Vue服务端渲染提供了支持,我们只需要简单的配置关键的entry和alias就可以完成Vue前端渲染构建和Node层构建,极大的简化了Vue服务端渲染
1.fis3简介fis3是狼厂出产的工程化构建工具,在其厂内得到广泛推广应用,在国内也火了很长一段时间。而在webpack和rollup大红大紫的当下,fis3似乎在日新月异的前端圈里渐渐地淡出大众的视野。暂不说孰优孰劣,好用够用就是最好的。fis3相对已比较成熟稳定,又太长时间没有新东西拿出来,在treeshaking这些技术面前显得有些落后。当前应该仍有不少的团队在持续地使用fis3,但其使用是如此简单,以至于没有什么太多的东西能拿来不断的吹牛的,来自于第三方的分享是如此
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供信息，所有相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International}