使用parcel打包

一种较新的打包工具

安装

1
npm i parcel-bundler -D

或全局安装

1
npm i parcel-bundler -g

原理

Parcel将资源树转换成包(bundles)树。许多其它的打包工具基本上是基于JavaScript资源,还有附加在其上的其它格式的资源。例如,在 JS 文件中内联成字符串。 Parcel 是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置。

步骤:

  1. 构建资源树
  2. 构建bundle树
  3. 打包

内部所用工具

转换

  • JavaScript -> Babel
  • CSS -> PostCSS
  • HTML -> PostHTML
  • 可以直接使用TypeScript

压缩

  • JavaScript -> uglify-es
  • CSS -> cssnano
  • HTML -> htmlnano

命令

常用命令最好添加到npm script中

DEV打包

参数中只要提供入口即可

1
parcel index.html

运行后默认在1234端口启动服务 http://localhost:1234/ ,具有热更新功能。

PRO打包

  • 打包

    1
    parcel build index.html
  • 禁用压缩

    1
    parcel build index.html --no-minify
  • 禁用文件系统缓存

    1
    parcel build index.js --no-cache
  • 设置目录

    1
    parcel build index.html -d output

参考

文章目录
  1. 1. 安装
  2. 2. 原理
  3. 3. 内部所用工具
    1. 3.1. 转换
    2. 3.2. 压缩
  4. 4. 命令
    1. 4.1. DEV打包
    2. 4.2. PRO打包
  5. 5. 参考
|