使用parcel做简单脚手架构建

使用parcel多入口简单地构建

开篇

首先parcel的打包是很简单的。

单入口的情况下,正常来说你只需要安装了parcel parcel-bundler

例如

有一个入口文件为 index.html

我们只需要简单地使用parcel index.html

那么此时index.html 内所有的外联元素 script link a src 等等都会被加载打包。

而且当我们需要解析sass之类的东西,会自动地进行下载对应的解析器。

这就是所谓的0配置。这种特性实际上非常的棒。但是不是很灵活~需要有一套唯一的。

还有很多的config可以在script 内联使用

具体的可以看看https://parceljs.org/ cli章节。

parcel的设计概念也有在进阶篇简单讲述。

  1. 构建资源树

  2. 构建 bundle 树

  3. 打包

两个重要东西

Asset 与 Packagers

parcel里的Asset子类都是实现Asset这个基类。

Asset相当于是对资源进行处理

内置的asset

相当于是对多个资源进行处理 package=>打包

在打包构建bundle树以后,就可以分配packager处理了(好像~~)

parcel 插件

parcel-plugin- 都会在初始化的时候自动加载。。

真的是够简洁。

主Bundle

type:它包含的资源类型 (例如:js, css, map, …)

name:bundle 的名称 (使用 entryAsset 的 Asset.generateBundleName() 生成)

parentBundle:父 bundle ,入口 bundle 的父 bundle 是 null

entryAsset:bundle 的入口,用于生成名称(name)和聚拢资源(assets)

assets:bundle 中所有资源的集合(Set)

childBundles:所有子 bundle 的集合(Set)

siblingBundles:所有兄弟 bundle 的集合(Set)

siblingBundlesMap:所有兄弟 bundle 的映射 Map<String(Type: js, css, map, …), Bundle>

offsets:所有 bundle 中资源位置的映射 Map<Asset, number(line number inside the bundle)> ,用于生成准确的 sourcemap 。

不过在开发环境中我们是采用将bundle做中间件使用。

parcel支持API模式使用。

只要传入config也是一样的打包。

而在1.8.0版本更新后也支持了多入口。(坑后面讲)

那我们的开发环境就变成了一个搭一个临时server做dev环境的问题了。

(express/ node server)都可以啦

const Bundler = require('parcel-bundler');
const app = require('express')();

// 使用 file 和 options 参数,初始化新的 bundler (有关 options 和 file 参数的内容,请参阅 bundler 文档)
const bundler = new Bundler(file, options);

// 让 express 使用 bundler 中间件,这将让 parcel 处理你 express 服务器上的每个请求
app.use(bundler.middleware());

// 监听 8080 端口
app.listen(8080);

这是官网的一个例子。

由于请求需要代理转发。不然会有跨域问题。

所以加一个http-proxy-middleware 用来proxy请求。

再导入几个环境变量配置,方便使用。

再上一个gzip中间件,基本的开发环境也就搭建好了。

有需要可以再加几个需要的中间件。

而因为热加载HMR parcel已经帮我们做了。我们也不用操心这一点。

一切在开始是有序的。在单入口下反应良好。

而当我将代码抽出来一层common层

此时噩梦开始出现了。

前面说了1.8.0开始有了多入口。

而在我们有了common的时候,自然应该使用多入口。在父级目录进行多入口打包。

谈谈遇到的坑

  1. 直接link common.scss

  2. script src common.js => common.js import ‘./common.scss’;

  3. 在自身的index.scss => @import common/common.scss

  4. 自身index.js => import common/common.scss

  5. import(‘common.scss’)这种(确实打出了一份common.scss) 但是link标签没有链接上。

script src temp.js => temp.js import(‘./common.scss’) // 这种方法很诡异,有一次成功了,但是后来又不行了(疑似cache问题导致)

以上结果当然是全死了。

要么 有抽离唯一公共资源,但pack的时候链接没打上,有没抽离出公共资源的,有main直接包含了common.scss资源的,有打包卡死的(怀疑是路径死循环)

反正就是怎么弄都不能我想要的效果(common.css打出来单一文件,每个html文件引入标签)

目前的暂时方法是,自动pack 多个common,然后走链接。

(看起来这个问题是针对sass/css资源路径的问题)

因为使用js的时候是可以打包成单一的公共文件并且link也是正确的。

该bug已经反馈,看看社区如何解决吧

https://github.com/parcel-bundler/parcel/issues/1640


接触parcel在它刚出现的时候,后来选择一次在实际开发中使用。

遭遇了大量的坑。只能使用parcel加几个自己写的替换文件内容的gulp插件勉强解决。

parcel现在的位置其实很尴尬,强大的webpack吸收了它的一些概念。变得更加强大。

不过parcel出现的意义还是很好的~~


祝君好

此时渐凉。适宜多添衣

发表评论

电子邮件地址不会被公开。 必填项已用*标注