@pika/web

现在前端开发已经离不开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