天猫开发和部署前端代码模块方案

• 开发时的和部署时类库的引用和存放是一致还是不同？

开发时和部署时，类库的的引用和存放是看起来一致，但是背后其实不一样。
天猫由于业务对模块的线上搭建的需求比较强烈，大部分场景下没法走本地打包，都用的存放在CDN的模块。
本地开发的时候，文件host会指到本地，引用的模块会从服务端拉取到本地（提高下次读取的速度，这部分工作由本地的开发server完成），但是引用的方式是和线上一样的。
本地开发时：

const overly = require('mui/overlay/index');

打包到线上

define('xxx', ['mui/overlay/index'], function(require){
  var overly = require('mui/overlay/index');
}

请求模块的url都是

http://g.alicdn.com/mui/overlay/4.0.0/index.js

• 模块放在项目中还是放在 CDN 之类服务器？

内部依赖模块放到项目中，公共模块放CDN。
其实这么描述有些抽象，但是也给了开发者足够的自由。

• 渲染网页用 Nginx 还是其他动态语言的 Web 服务器？

现在貌似这个问题没什么好讨论的。
本地开发环境最好和服务端架构保持一致，现在服务端是Node，本地肯定也是Node。

• 制作网页的流程，是先有设计师的稿，还是先看模块？

最理想的情况下，设计师应当花比较多的时间和前端一起维护一套模块UI规范，然后设计师设计页面的时候，也必须根据这个模块UI规范来。
所有有个性化的调整，都应当考虑是不是应当补充回到UI规范中，保证整体视觉的一致性体验。
当然，总有不合适和一些特殊场景下的视觉稿，就单独处理好了。
所以应该是在设计师的稿子上体现模块，而不是到前端才来看哪些模块和视觉稿能匹配上。

• 会选择用自己写的模块还是从社区寻找模块？

对于模块，社区方案一定是非常棒的，所以在没有现成的情况下，非常建议引入社区模块，并在引入之后维护起来。
后面一点维护起来非常重要，引入一个模块很简单，维护起来就不是了，或许你会发现这个社区模块有一些bug，或者是部分不满足需求，去修改并改善这个模块比重写一个模块要求更高，难度更大（你要理解其他开发者为什么要这么写代码）。完成之后提MR到社区也是对社区的贡献。
自己写的情况也有，但更多还是要考虑自己写的意义在哪里，一般在社区模块落后于你对模块的思考和规划时，自己写是一个好的选择。

 

作者：吴天豪
链接：https://www.zhihu.com/question/20790576/answer/102228074
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。