ÔÎÄÁ´½Ó http://blog.gaoqixhb.com/p/55f5889d167799ee3eb7ec8d
½á¹ûÊÇÀ´×ÔÒ»·Ýµ÷²éµÄÊý¾Ý£¬Ö÷Òªµ÷²éÁËÕâô¼¸¸öÎÊÌ⣺
ÎÊÌâÒ»£ºÔ¤´¦ÀíÆ÷
ÎÒÎʵĵÚÒ»¸öÎÊÌâÊÇ“ÄãÓÃʲôԤ´¦ÀíÆ÷£¿”¡£
³£ÓõÄÔ¤´¦ÀíÆ÷»ù±¾É϶¼ÔÚ´ð°¸ÖÐÓÐÁË£¬²»µÃ²»Ö¸³öµÄÊÇÎÒÖ®ËùÒÔûÓÐ°Ñ PostCSS ·ÅÔÚÁбíÖÐÊÇÒòΪ PostCSS ×÷Ϊºó´¦ÀíÆ÷ºÜ¶àʹÓõÄÈËÍùÍùÒ²»áÅäºÏʹÓÃÆäËüµÄÔ¤´¦ÀíÆ÷ÔÚËûÃǵŤ×÷ÖУ¬ÕâÑù»áÒýÆðÑ¡ÔñÇ¿ÆÈÖ¢µÄÀ§ÈÅ¡£ÎÒÔÚÎʾíÖÐÖ¸³ö£¬Èç¹ûÄãÕæµÄÊÇֻʹÓà PostCSS µÄ»°£¬ÄÇÄã¾ÍÑ¡Ôñ“ÆäËü”°É¡£
| Ô¤´¦ÀíÆ÷ |
µÃƱÊý |
°Ù·Ö±È |
| Sass |
689 |
66.00% |
| Less |
140 |
13.41% |
| Stylus |
44 |
4.21% |
| ²»Ê¹ÓÃÔ¤´¦Àí |
141 |
13.51% |
| ÆäËü |
30 |
2.87% |
ÎÊÌâ¶þ £ºPostCSS ºÍ Rework
ÏÂÒ»¸öÎÊÌ⣬ÎÒÏëÒª¿´¿´µ½µ×ÓжàÉÙ¹¤³ÌʦÌý¹ý“ºó´¦ÀíÆ÷”¹¤¾ß£¬ÀýÈç PostCSS »òÕß Rework¡£ËùÒÔÕâµÀÌâÎÒµÄÎÊÌâÊÇ£º“ÄãÊÇ·ñÔøÌý˵¹ýÏÂÃæÁгöµÄ CSS ´¦Àí¹¤¾ß£¿”¡£
ÕâÊÇÕâµÀÌâµÄ½á¹û
|
Ìý/¿´¹ý |
ż¶ûÓà |
³£ÓÃ |
´ÓûÌý¹ý |
| PostCSS |
53.64% (560) |
10.34% (108) |
8.91% (93) |
27.11% (283) |
| Rework |
21.84% (228) |
2.30% (24) |
0.86% (9) |
75.00% (783) |
´ÓÔʼÊý¾ÝÖÐÎÒÃÇ¿ÉÒÔÖªµÀ£¬ÓÐ 72.89% µÄÈËÊÇÖªµÀ»òÕßÓùý PostCSS µÄ£¬¶Ô±È֮ϠRework Ö»ÓÐ 25% µÄÈË¡£Á½¸ö¹¤¾ß¶¼Ö»Óм«ÉÙµÄÒ»²¿·ÖÈ˻ᾳ£Ê¹ÓÃËûÃÇ¡£
·ÖÎöÕâ¸öÊý¾ÝÎÒÃÇ¿ÉÒÔÖªµÀ£¬ÓÐ 269 Ʊ£¨³¬¹ý 25%£©µÄÈ˼ÈûÓÐÌý¹ý PostCSS ҲûÓÐÌý¹ý Rework¡£Ïà±È½Ï֮ϣ¬ÓÐ 95 Ʊ£¨9.1%£©±íʾËûÃǾ³£Ê¹ÓÃÕâÁ½¿î¹¤¾ßÖеÄÖÁÉÙÒ»ÖÖ¡£
ÎÒÈÏΪÕâ¸ö½á¹û·´Ó³³öÁ˺ó´¦ÀíÆ÷ÁìÓòÔÚǰ¶Ë½ç»¹ÊǸö±È½ÏеÄÁìÓò£¬ÎÒÏ£ÍûÔÚ½«À´ÄÜ¿´µ½Õâ¸öÊý×Ö»á·ÉÊóÔö³¤¡£
ÎÊÌâÈý£º×Ô¶¯»¯¹¤¾ß
ÏÂÒ»¸öÎÊÌâÊÇÎÒ×î¸ÐÐËȤµÄ——“Äã¸üϲ»¶ÔÚÄãµÄ¹¤×÷ÖÐʹÓÃÄÄ¿î×Ô¶¯»¯¹¤¾ß£¿”¡£
ÎÒÃÇÏÈ¿´Ò»Ï npm µÄÏÂÔØÊýÁ¿£¬Grunt µÄÏÂÔØÁ¿ÊÇ 145 Íò/Ô£¬Gulp ÔòÊÇ 134 Íò/Ô¡£´ÓÏÂÔØÊ¹ÓÃÁ¿ÉÏÀ´¿´£¬ÕâÁ½ÕßËÆºõÊDz¶àµÄ£¬²»¹ý´ÓÎʾíµÄÊý¾ÝÀ´¿´£¬Óà Gulp ´úÌæ Grunt ËÆºõ³ÉÁËÒ»ÖÖÇ÷ÊÆ¡£
ÈÃÎÒÃÇÀ´¿´¿´Îʾí½á¹û°É£º
| ×Ô¶¯»¯¹¤¾ß |
µÃƱÊý |
°Ù·Ö±È |
| Gulp |
488 |
46.74% |
| Grunt |
274 |
26.25% |
| NPM |
40 |
3.83% |
| Broccoli |
13 |
1.25% |
| Other |
50 |
4.79% |
| ²»Ê¹ÓÃÈκι¤¾ß |
179 |
17.15% |
ÁîÈ˾ªÑȵÄÊ£¬Gulp »ñµÃÁË 46.7% µÄͶƱ¶ø Grunt Ö»ÓÐ 26.3%£¬Õâ˵Ã÷´ó¼ÒÔ½À´Ô½Ï²»¶Ê¹Óà Gulp ÁË¡£ÁíÍâÖ»ÓÐ 17.2% µÄÈË˵ËûÃDz»ÊÊÓÃÈκÎ×Ô¶¯»¯¹¤¾ß£¬ËµÃ÷´ó²¿·Öǰ¶Ë¿ª·¢ÈËÔ±ÒѾÒâʶµ½ÁË×Ô¶¯»¯¹¹½¨¹¤¾ßµÄºÃ´¦²¢½«ÆäÔËÓÃÔÚÏîÄ¿ºÍÍŶÓÖС£
ÎÊÌâËÄ£ºJS ¿âºÍ¿ò¼Ü
ÁíÍâÒ»¸öÎұȽϸÐÐËȤµÄÎÊÌâÊÇÏÖÔÚ×îÁ÷ÐÐµÄ JS ¿âºÍ¿ò¼ÜÊÇʲô£¬ÏÂÃæÊǽá¹û£º
|
Ìý/¿´¹ý |
ż¶ûÓà |
³£ÓÃ |
´ÓûÌý¹ý |
| jQuery |
1.7% (18) |
6.8% (71) |
91.5% (955) |
0% (0) |
| Underscore |
33.4% (349) |
19.2% (200) |
38.6% (403) |
8.8% (92) |
| Backbone |
58.1% (606) |
21.6% (226) |
18.6% (194) |
1.7% (18) |
| AngularJS |
36.4% (380) |
34.9% (364) |
28.5% (298) |
0.2% (2) |
| Ember |
76.8% (802) |
15.6% (163) |
4.6% (48) |
3% (31) |
| React |
59.6% (622) |
21.8% (228) |
15.7% (164) |
2.9% (30) |
| Polymer |
70.5% (736) |
12.2% (127) |
3.3% (35) |
14% (146) |
| Knockout |
67.9% (709) |
10.4% (109) |
5.5% (57) |
16.2% (169) |
ûÓÐÐüÄî jQuery µÃµ½ÁË 91.5% µÄ×î¸ßƱÊý£¬²¢ÇÒÕâÖ»Êdz£ÓÃËüµÄÈË¡£²»µÃ²»ËµËüÊÇËùÓпâÀïÃæÓ°Ïì×îÉîÔ¶µÄÒ»¸öÁË¡£Êý¾Ý»¹ÏÔʾ£¬ÓÐ 28.5% µÄ¿ª·¢Õß¾³£Ê¹Óà AngularJS£¬18.6% µÄÈ˳£Óà Backbone£¬15.7% µÄÈ˳£Óà React¡£
ÈÃÎÒÃÇÆ²¿ª jQuery ºÍ Underscore Á½¸ö¿â¿´¿´ÕâЩ MV* ¿ò¼ÜµÄÊý¾Ý£¬Óг¬¹ý 50%£¨531Ʊ£©µÄÈËÖÁÉÙʹÓÃÆäÖÐÒ»¿î¿ò¼Ü¡£
ÌâÍâ»°£¬Ö®ºóÎÒÖØ¿ªÕâ¸öµ÷²éÎʾíµÄʱºòÎÒ»áÔÙÎÊÒ»¸ö“ÓжàÉÙ¿ª·¢Õß¿ªÊ¼Ê¹Óà ES6(ES2015) ÁË£¿”ÎÒÏàÐÅÕâ¸ö»áÓкܴóµÄÔö³¤¿Õ¼ä£¬²¢ÇÒÎ񼆼̮æÕâ¸öÎÊÌâµÄ¾ßÌåÏÖ×´¡£
ÎÊÌâÎ壺ÄãÔÚÄãµÄÖ÷ÒªÏîÄ¿ÖÐʹÓÃÄÄ¿î JS ¿â/¿ò¼Ü
ÕâÌâÎÒÎʵÄÊÇ£º“ÄãÔÚÄãµÄÖ÷ÒªÏîÄ¿ÖлáʹÓÃÄÄ¿î JS ¿â/¿ò¼Ü£¿”¡£ÕâÌâÒòΪÊǺóÃæ¼ÓÉÏÈ¥µÄ£¬ËùÒÔÖ»ÓÐ 467 ¸öͶƱ£¬Õâ¸ö»ò¶à»òÉÙ»áÓ°Ïì×îºóµÄͳ¼Æ¡£ÏÂÃæÊÇͳ¼Æ½á¹û£º
|
µÃƱÊý |
°Ù·Ö±È |
| Ö»ÓÃÔÉú²»Óÿâ |
52 |
11.13% |
| jQuery |
264 |
56.53% |
| AngularJS |
72 |
15.42% |
| React |
38 |
8.14% |
| Ember |
15 |
3.21% |
| Backbone |
11 |
2.36% |
| Underscore |
7 |
1.50% |
| Polymer |
2 |
0.43% |
| Knockout |
6 |
1.28% |
| ÆäËü£¨ÇëÖ¸³ö£© |
0 |
0.00% |
¼´Ê¹ÔÚͶƱ×ÜÊýÉÙÁËÒ»°ëµÄÇé¿öÏ£¬jQuery Ҳƾ×Å 56.53%£¨264Ʊ£©µÄ¸ßƱÄõ½ÁË×ʹÓÿâµÄ±¦×ù£¬½ôËæÆäºóµÄÊÇ AngularJS£¬ÓÐ 15.42%£¨72Ʊ£©¡£
ÒòΪÕâµ½µ×µÄ×ÜÆ±ÊµÌ«ÉÙÁË£¬ÎÒÒ²²»Ïë¶ÔÕâµÀÌâµÄÊý¾Ý½øÐÐÌ«¶àµÄÔ¤²â·ÖÎö¡£µ«ÊÇ jQuery µÄ¸ßƱÈÔÈÃÎұȽϸÐÐËȤ£¬ÎÒÏàÐÅËæ×Å ES2015 µÄÆÕ¼° jQuery µÄ·Ý¶î»áÂýÂý½µµÍ£¬´ó¼Ò¶¼»áת¶øÊ¹ÓÃÔÉú»òÕßһЩС¶øÃÀµÄ¿â¡£
ÎÊÌâÁù£ºJS Ä£¿é¼ÓÔØÆ÷
Ä£¿é¼ÓÔØÆ÷ÎÒ×Ô¼ºÒ²Ê¹ÓùýÒ»¶Îʱ¼ä£¬²»¹ýÎұȽÏÏëÖªµÀÊÇ·ñËùÓеÄǰ¶Ë¹¤³ÌʦÃÇÒ²¶¼»áʹÓÃËü£¬Èç¹ûÊǵϰËûÃÇ»áÑ¡ÔñʹÓÃÄĿ¾ß£¿ËùÒÔÕâµÀÌâµÄÎÊÌâÊÇ£º“ÄãÊÇ·ñÔÚÄãµÄ¹¤×÷ÖÐʹÓùýÒ»¿î JS Ä£¿é¼ÓÔØÆ÷£¿”
ÏÂÃæÊÇÕâµÀÌâµÄͳ¼Æ½á¹û£º
| Ä£¿é¼ÓÔØÆ÷ |
µÃƱÊý |
°Ù·Ö±È |
| ²»Ê¹ÓüÓÔØÆ÷ |
538 |
51.53% |
| Browserify |
185 |
17.72% |
| RequireJS |
142 |
13.60% |
| webpack |
120 |
11.49% |
| JSPM |
30 |
2.87% |
| ÆäËü |
29 |
2.78% |
Êý¾Ý¿ÉÒÔ¿´³ö£¬48.47% µÄ¿ª·¢ÕßÒѾ¿ªÊ¼Ê¹ÓÃÄ£¿é¼ÓÔØÆ÷¹ÜÀíËûÃǵÄÒÀÀµÁË¡£ÆäÖÐ 17.7% µÄÈËʹÓõÄÊÇ Browserify£¬13.6% µÄÈËʹÓà RequireJS£¬11.5% µÄÈËʹÓà webpack¡£webpack ×î½üµÃµ½Á˸߶ȵĹØ×¢¶øÇÒÎÒÃÇ¿ÉÒÔ¿´µ½Êý¾ÝÉÏÆäʵ webpack ²¢Ã»ÓвîǰÁ½Ãû¶àÉÙ¡£µ±È»ÔÚ ES2015 ÆÕ¼°Ö®ºóÊý¾Ý½«ÈçºÎ±ä»¯ÎÒÒ²ÊǷdz£¹ØÐĵġ£
²»¹ÜÔõô˵¿´µ½´ó¼Ò¶¼ÔÚʹÓÃÄ£¿é¼ÓÔØÆ÷ÎÒ»¹ÊǺܸßÐ˵쬵±È»ÎÒҲϲ»¶ÔÚδÀ´ÄÇЩ²»ÊÊÓüÓÔØÆ÷µÄÈË»áÔ½À´Ô½ÉÙ¡£
ÎÊÌâÆß£ºJS µ¥Ôª²âÊÔ
ÎÒÒ»Ö±ºÜºÃÆæÊDz»ÊÇËùÓеÄÈ˶¼»á¶ÔËûÃÇµÄ JS ´úÂë»òÕßÏîÄ¿½øÐе¥Ôª²âÊÔ£¿ËùÒÔÕâµÀÌâÎÒµÄÎÊÌâÊÇ£º“ÔÚÄãµÄÏîÄ¿ÖÐÄãʹÓÃʲôµ¥Ôª²âÊÔ¹¤¾ß½øÐвâÊÔ£¿”¡£
ÏÂÃæÊÇͳ¼Æ½á¹û£º
| ¹¤¾ß |
µÃƱÊý |
°Ù·Ö±È |
| ²»Ê¹ÓòâÊÔ¹¤¾ß |
615 |
58.91% |
| Mocha |
161 |
15.42% |
| Jasmine |
159 |
15.23% |
| QUnit |
35 |
3.35% |
| Tape |
20 |
1.92% |
| Jest |
11 |
1.05% |
| Karma |
6 |
0.57% |
| Intern |
10 |
0.96% |
| ÆäËü |
27 |
2.59% |
Êý¾Ý¿ÉÒÔ¿´³öÕ¼´óÍ·µÄÊDz»Ê¹ÓÃÈκβâÊÔ¹¤¾ß£¬Õ¼ÁË 58.91%£¬Êý¾Ý˵Ã÷Óк޴óÒ»²¿·ÖÈËÔÚÏîÄ¿ÖкöÊÓÁ˵¥Ôª²âÊÔÕâÒ»»·½Ú£¬ËäÈ»ËüÕæµÄºÜÖØÒª¡£ÔÚÆäËüһЩʹÓõ¥Ôª²âÊÔ¹¤¾ßµÄͶƱÖУ¬´ó²¿·ÖÈËÑ¡ÔñÁË Mocha(15.42%) »ò Jasmine(15.23%) ÕâÁ½¿î¹¤¾ß¡£×ܵÄ˵À´¾ÍÊÇǰ¶Ë¹¤³ÌʦÔÚ JS µ¥Ôª²âÊÔÕâ¿éÓÐÒ»¶¨µÄ²î¾à¡£
ÎÊÌâ°Ë£ºÆäËü¹¤¾ß
×îºóÒ»¸öÎÊÌâÁоÙÁËһЩ°ü¹ÜÀíºÍÏîÄ¿¹ÜÀíÀï³£ÓõŤ¾ß£¬È»ºóÎÒÎʵÄÊÇ£º“ÕâÀïÄÄЩ¹¤¾ßÄãÔøÓùý£¿”¡£
ÏÂÃæÊÇͳ¼Æ½á¹û£º
|
Ìý/¿´¹ý |
ż¶ûÓà |
³£ÓÃ |
´ÓûÌý¹ý |
| Bower |
23.75% (248) |
26.44% (276) |
47.89% (500) |
1.92% (20) |
| Yeoman |
37.45% (391) |
30.56% (319) |
22.13% (231) |
9.86% (103) |
| Ender |
30.36% (317) |
1.92% (20) |
0.86% (9) |
66.86% (698) |
| NPM |
6.80% (71) |
17.91% (187) |
71.07% (742) |
4.22% (44) |
´ó¼ÒµÄÖ÷ҪʹÓù¤¾ß»ù±¾ÉÏÊÇ Bower ºÍ NPM£¬ÉõÖÁÓкܴóÒ»²¿·ÖÈËûÓÐÌý˵¹ý Ender¡£¶øÎÒÈÏΪÎÒÓùýµÄ×î°ôµÄÒ»¸ö¹¤¾ß Yeoman µÄÆÕ¼°¶ÈÒ²±È½ÏµÍ£¬Ö»ÓÐ 22.13% µÄÈ˾³£Ó㬽«½ü 10% µÄÈËûÓÐÌý˵¹ýËü¡£ÔÚÎҵľÑéÀËüÄÜÈÃÏîÄ¿±äµÄ¸ü¼Ó¼òµ¥£¬ÏîÄ¿ÖÐʹÓÃËüÊǷdz£ÓмÛÖµµÄ¡£
×ܽá
×ܵÄ˵À´£¬»¹ÊÇÓкܴóÒ»²¿·ÖÈËÔÚ¹¤×÷ÖÐʹÓÃǰ¶Ë¹¤¾ßµÄ¡£µ±È»Èç¹ûÄãÊìÁ·Ê¹Óà JS, CSS µÄÄÇЩ½ÅÊּܹ¤¾ß£¬ÄãÒ»¶¨ÊÇËûÃǵ±ÖеÄٮٮÕß¡£ÁíÒ»·½ÃæÀ´¿´£¬JS ²âÊÔ¹¤¾ßµÄÆÕ¼°³Ì¶È»¹±È½ÏµÍ£¬Î¨Ò»µÄ½â¾ö°ì·¨¾ÍÊÇÏò´ó¼ÒÆÕ¼°ÈçºÎÔÚÏîÄ¿ÖÐʹÓúÍÇ¨ÒÆÕâЩ¹¤¾ß£¬µ±È»×îÖØÒªµÄÊÇÈçºÎ±àд¿É²âÊ﵀ JS ´úÂë