PostsOldAbout

使用parcel做简单脚手架构建

· javascript, 前端技术

使用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. 构建资源树

  • 构建 bundle 树

  • 打包

    • 两个重要东西

    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

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

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

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

  • 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出现的意义还是很好的~~

    祝君好

    此时渐凉。适宜多添衣

    2026 © zwkang.RSS