使用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. 构建资源树
  • 构建 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出现的意义还是很好的~~


    祝君好

    此时渐凉。适宜多添衣

    发表回复

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