@pika/web

时间 2019-12-05

标签 pika web 栏目 HTML 繁體版

原文原文链接

如今前端开发已经离不开webpack. 虽然webpack带来不少好处,可是它繁琐的配置以及较高的学习成本成为了开发人员的负担.vue-cli为咱们作了一些基础配置,可是会带来另一个问题.咱们可能只是写一个小demo,可是须要安装一大堆没用的第三方依赖. @pika/web在必定程度上能够解决这些问题前端

开发模式的变换

在nodejs尚未问世的时候,咱们前端开发的模式主要是经过script标签直接引入静态资源,虽然这种方式有不少问题,但不得不认可这种方式是最简单的. nodejs诞生以后,npm逐渐成为了前端开发最大的包管理平台. 可是浏览器上不能运行node模块系统.因此npm下载下来的依赖包(node模块系统)必须经过webpack编译成浏览器能识别的文件. 这也是webpack模块化开发很是重要的一点vue

什么能够替代Webpack

咱们上面说到,浏览器不能直接运行node模块系统, 可是如今不少浏览器已经支持ES Module了node

咱们如今就能够经过scritp标签直接饮用第三方的ES Module包.不须要配置繁琐的Webpack了.而@pika/web就是用来替代Webpack来安装依赖项的一个工具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.jsweb

@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的时候使用.操做简单,也不须要复杂的配置,成本小不少vue-cli