前端小白的修炼 2019-11-04
开发中明显可以感觉到加载一个HTML需要依赖很多的JS文件依赖,比如到一定阶段的HTML页面,尾部就是这样的:
<script src="/public/vendors/jquery/js/jquery.min.js"></script> <script src="/public/vendors/popper.js/js/popper.min.js"></script> <script src="/public/vendors/bootstrap/js/bootstrap.min.js"></script> <script src="/public/vendors/pace-progress/js/pace.min.js"></script> <script src="/public/vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script> <script src="/public/vendors/@coreui/coreui-pro/js/coreui.min.js"></script> <script src="/public/vendors/moment/js/moment.min.js"></script> <script src="/public/vendors/select2/js/select2.min.js"></script> <script src="/public/vendors/bootstrap-daterangepicker/js/daterangepicker.js"></script> <script src="/public/js/src/jquery.twbsPagination.js"></script> <script src="/public/js/src/HZRecorder.js"></script>
随着所需功能越来越多,我们就需引入更多的JS依赖和CSS依赖,有时还会面临着一个文件不够需要拆分成几个文件的情况。因此可能会遇到以下几点问题:
而前端要使用模块化的原因或者要解决的问题就是:
常见的规范有 CMD、AMD、CommonJS 规范
ES6 助推了前端模块化,import语法会被JavaScript引擎静态分析,这是一个很重要的功能,我们通常使用CommonJS时,代码都是在运行时加载的,而ES6是在编译时就引入模块代码,当然我们现在的浏览器还没有这么强大的功能,需要借助各类的编译工具(webpack)才能正确的姿势来使用ES6的模块化的功能。也正因为能够编译时就引入模块代码,所以使得静态分析就能够实现了。
ES6模块化的优点有