zoukankan      html  css  js  c++  java
  • 实习第十天

    时间很快,哈哈哈,已经第十天了

    还不知道到以后的路要怎么走

    还是慢慢学吧,没事的

    我为什么要使用Webpack?

    https://www.jianshu.com/p/9f2d0b64f3b8

    简单讲讲我与前端的故事吧。

    刚接触前端时,所有静态资源CSS、图片和JS都是手动引入HTML页面中,这并没有什么不好,想要什么就引入什么嘛。另外,所见即所得,开发好的项目文件直接就可以上传服务器,很方便,因此这样的开发方式一直持续到前不久,也就是开始正式使用Webpack之前。

    渐渐地,我开始感觉到jQuery虽然很好用,但是维护起来不是很方便,就是所谓的开发一时爽,维护起来真要命。杂乱无章的代码混在一个文件中,想要寻找某个功能的代码很是困难,要是分开成多个文件引入,又会造成HTTP请求数过多的问题。

    于是,我后来选择了Vue。

    使用Vue之后的一个好处就是,我不再需要手动去操作DOM了,直接可以将JS变量放到HTML页面中,数据会自动绑定,这对于开发者来说非常方便,我们只需要把重点放到对数据的处理上就可以了,这样代码也精简了很多。

    再后来,我发现有些代码在很多地方都要用到,同一个项目中,JS我可以通过定义方法来复用,CSS可以通过定义类名来复用,可是对于HTML,我却无能为力,只能通过复制粘贴的方式……

    所以,我选择了Vue组件。

    但是问题接着又来了,我发现Vue组件虽然解决了HTML的复用问题,但实际上只不过是将HTML和JS组合在了一起,CSS依然游离在外,在同一项目中确实都实现了复用,但是当其他项目要使用它时,还得把游离在外的CSS代码复制粘贴过去,这样久而久之自然也是难以忍受了。

    幸运的是,单文件的Vue组件正好解决了这个问题。我们可以将HTML、CSS和JavaScript代码放在同一个.vue文件当中,强大的Webpack可以将这些代码分离出来,并分别与其他同类型的代码打包到一起。而我们不需要管Webpack内部是如何运作的,只需要知道单文件组件形式确实会为我们的工作带来极大的便利性。

    在CSS方面,习惯使用Less来写CSS代码的我,明显体会到Less模块化所带来的便利性,一个Less文件可以通过引入其他多个Less文件,最后只需将这一个Less文件所编译成的CSS文件引入页面即可。之前我使用的Less编译工具一直都是koala,它是一个可视化的编译软件,可以进行Less代码的编译以及CSS和JS代码的压缩。正因为Less很好用,并且节省了HTTP请求数,然后我就在想,要是JS也能像Less一样模块化引入并且打包成一个JS文件就好了。

    正因为有着组件化、模块化和单文件引入的强烈需求,我开始尝试寻找着同时具备这些功能的打包工具,而在尝试过Grunt、Gulp、Webpack和Parcel之后,最终我选择了Webpack。

    那么,为什么我会在这些工具中最终选择Webpack呢?

    首先,Grunt和Gulp只能将一些CSS和JS文件分别压缩合并成单个文件,当然也具有一些编译功能,比如Less和Sass的编译、ES6到ES5的编译等等。但是Webpack不仅具有它们所具备的这些编译压缩合并功能,同时还具备模块化开发和组件式开发等优点,在目前流行的前端框架React和Vue中也得到很好的支持。

    然后再说说Parcel,它一度被人认为是未来最有可能替代Webpack的前端打包工具,主要原因是它几乎零配置,而且打包入口也不仅仅只是JS,另外其打包速度也要比Webpack快。然而,虽然Parcel相比Webpack似乎具有更多优势,但它毕竟还不够成熟,没有Webpack庞大的社区,一旦遇到问题很难在网上快速找到相应解决办法。并且最近Webpack 4.0已经发布,配置相比之前简化了一些,也增加了一些新功能,所以我们完全有理由相信Webpack在未来也会越来越好。

    因此,在经过一番体验和对比之后,最终我选择了Webpack。

    最后总结一下Webpack的主要优势:

    ① 模块化开发(import,require)
    ② 预处理(Less,Sass,ES6,TypeScript……)
    ③ 主流框架脚手架支持(Vue,React,Angular)
    ④ 庞大的社区(资源丰富,降低学习成本)

  • 相关阅读:
    [Luogu P3626] [APIO2009] 会议中心
    杭电 1869 六度分离 (求每两个节点间的距离)
    杭电 1874 畅通工程续 (求某节点到某节点的最短路径)
    最短路径模板
    杭电 2544 最短路径
    POJ 1287 Networking (最小生成树模板题)
    NYOJ 1875 畅通工程再续 (无节点间距离求最小生成树)
    POJ 2485 Highways (求最小生成树中最大的边)
    杭电 1233 还是畅通工程 (最小生成树)
    杭电 1863 畅通工程 (最小生成树)
  • 原文地址:https://www.cnblogs.com/Py-king/p/11489647.html
Copyright © 2011-2022 走看看