现在前端开发已经离不开webpack. 虽然webpack带来很多好处,但是它繁琐的配置以及较高的学习成本成为了开发人员的负担.vue-cli为我们做了一些基础配置,但是会带来另外一个问题.我们可能只是写一个小demo,但是需要安装一大堆没用的第三方依赖. @pika/web在一定程度上可以解决这些问题
开发模式的变换
在nodejs还没有问世的时候,我们前端开发的模式主要是通过script标签直接引入静态资源,虽然这种方式有很多问题,但不得不承认这种方式是最简单的. nodejs诞生之后,npm逐渐成为了前端开发最大的包管理平台. 但是浏览器上不能运行node模块系统.所以npm下载下来的依赖包(node模块系统)必须通过webpack编译成浏览器能识别的文件. 这也是webpack模块化开发非常重要的一点
什么可以替代Webpack
我们上面说到,浏览器不能直接运行node模块系统, 但是现在很多浏览器已经支持ES Module了
我们现在就可以通过scritp标签直接饮用第三方的ES Module包.不需要配置繁琐的Webpack了.而@pika/web就是用来替代Webpack来安装依赖项的一个工具
@pika/web如何替代Webpack
- @pika/web 通过一种新的方式来安装 npm 依赖项，可以让它们在浏览器中运行
- @pika/web 实际上并不是一个构建工具，也不是一个打包器，而是一个依赖项安装工具，可以让你减少对其他工具的依赖
- @pika/web 会检查 package.json，看看有没有导出模块的依赖项，然后在本地 web_modules 目录中安装这些依赖项
- @pika/web只针对导出es module的依赖项. 不支持Node 模块规范的依赖项
@pika/web 会把每个依赖都打包到一个单独的.js 文件中。如下图整个 dayjs包被安装成 web_modules/dayjs.js
@pika/web的优缺点
- @pika/web 将打包器的复杂性封装在了一个单独的安装工具中,不需要我们去进行繁琐的配置
- @pika/web 的依赖项安装方式（单个 JS 文件）配合HTTP/2在性能方面具有更大的优势
- 不会因为更新某个依赖或者改动某一行代码而重新下载整个包
- 现阶段npm上ES module的包还是挺少的.这就导致@pika/web的实际应用价值大打折扣.巧妇难为无米之炊啊
@pika/web刚问世不久,现阶段只是可以替代Webpack处理依赖项的功能.而Webpack中处理.vue, sass等文件的功能@pika/web现阶段是无法替代的. @pika/web非常适合我们针对某个依赖项做一些小demo的时候使用.操作简单,也不需要复杂的配置,成本小很多
