前端 - 模块管理器 - 学习/实践

我不是女神ヾ 2022-12-05 05:15 131阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于了解学习前端项目开发中用到的前端模块管理器，同时理清前端工程化历程. 更好地进行前端项目的开发与维护. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档阅读： <a href="http://www.ruanyifeng.com/blog/2014/09/package-management.html" rel="nofollow">http://www.ruanyifeng.com/blog/2014/09/package-management.html</a>&nbsp; //前端模块管理器简介 <a href="http://www.ruanyifeng.com/blog/2012/10/javascript_module.html" rel="nofollow">http://www.ruanyifeng.com/blog/2012/10/javascript_module.html</a>&nbsp; &nbsp;/Javascript模块化编程（一）：模块的写法 <a href="http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html" rel="nofollow">http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html</a>&nbsp; //Javascript模块化编程（二）：AMD规范 <a href="http://www.ruanyifeng.com/blog/2012/11/require_js.html" rel="nofollow">http://www.ruanyifeng.com/blog/2012/11/require_js.html</a>&nbsp; //Javascript模块化编程（三）：require.js的用法 <a href="http://wiki.commonjs.org/wiki/Modules/1.1" rel="nofollow">http://wiki.commonjs.org/wiki/Modules/1.1</a>&nbsp;// commonJS规范 <a href="https://github.com/amdjs/amdjs-api/wiki/AMD" rel="nofollow">https://github.com/amdjs/amdjs-api/wiki/AMD</a>&nbsp;// AMD规范 <a href="https://blog.csdn.net/william_n/article/details/115824094" rel="nofollow">https://blog.csdn.net/william_n/article/details/115824094</a>&nbsp; &nbsp;//&nbsp;前端开发30年变迁史&nbsp; <a href="https://www.ruanyifeng.com/blog/2020/08/how-nodejs-use-es6-module.html" rel="nofollow">https://www.ruanyifeng.com/blog/2020/08/how-nodejs-use-es6-module.html</a>&nbsp;//&nbsp;Node.js 如何处理 ES6 模块 &nbsp; 2.整理输出 2.1 模块的变迁 文中关于模块的变迁： <img alt="" height="1200" src="https://img-blog.csdnimg.cn/20210419000024591.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="970"> 额外补充： 阮一峰 关于模块的介绍 <img alt="" height="1200" src="https://img-blog.csdnimg.cn/20210418235834922.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="973"> 阮一峰 -&nbsp; avascript模块化编程（二）：AMD规范&nbsp; <img alt="" height="1200" src="https://img-blog.csdnimg.cn/20210419131748882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="974"> &nbsp; &nbsp; &nbsp; 补充：&nbsp;<a href="https://blog.csdn.net/william_n/article/details/108487342" rel="nofollow">https://blog.csdn.net/william_n/article/details/108487342</a>&nbsp; &nbsp;//&nbsp;前端 - 模块管理器 个人学习总结： 综合上面的介绍， 可以知道 
 <blockquote> 
 前端开发先是没有模块概念， 然后引入模块，但是出现不同的实现， 主要是CommonJS和AMD【第一次接触的时候，还以为是AMDcpu芯片商】， 
 &nbsp;分被用于nodeJS和前端开发。但其实一套方案即可，于是出现了ES模块方案，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 
 </blockquote> 这个过程就像： 中国的历史一样， 先是没有一个大一统王朝，然后群雄并起， 割据争霸， 最后出现一个强有力的逐鹿者， 一统天下，形成一个统一的局面。 不仅仅是前端开发， 很多事也是如此，从无到有，从多到一，本身这个过程又是一个从少到多的过程， 只不过时间维度上，又或长或短。 &nbsp; &nbsp; &nbsp; 后续补充 &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="http://www.ruanyifeng.com/blog/2014/09/package-management.html" rel="nofollow">http://www.ruanyifeng.com/blog/2014/09/package-management.html</a>&nbsp; //前端模块管理器简介 <a href="http://www.ruanyifeng.com/blog/2012/10/javascript_module.html" rel="nofollow">http://www.ruanyifeng.com/blog/2012/10/javascript_module.html</a>&nbsp; &nbsp;/Javascript模块化编程（一）：模块的写法 <a href="http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html" rel="nofollow">http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html</a>&nbsp; //Javascript模块化编程（二）：AMD规范 <a href="http://www.ruanyifeng.com/blog/2012/11/require_js.html" rel="nofollow">http://www.ruanyifeng.com/blog/2012/11/require_js.html</a>&nbsp; //Javascript模块化编程（三）：require.js的用法 <a href="http://wiki.commonjs.org/wiki/Modules/1.1" rel="nofollow">http://wiki.commonjs.org/wiki/Modules/1.1</a>&nbsp;// commonJS规范 <a href="https://github.com/amdjs/amdjs-api/wiki/AMD" rel="nofollow">https://github.com/amdjs/amdjs-api/wiki/AMD</a>&nbsp;// AMD规范 <a href="https://blog.csdn.net/william_n/article/details/115824094" rel="nofollow">https://blog.csdn.net/william_n/article/details/115824094</a>&nbsp; &nbsp;//&nbsp;前端开发30年变迁史 <a href="https://www.ruanyifeng.com/blog/2020/08/how-nodejs-use-es6-module.html" rel="nofollow">https://www.ruanyifeng.com/blog/2020/08/how-nodejs-use-es6-module.html</a>&nbsp;//&nbsp;Node.js 如何处理 ES6 模块 </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...