Parcel 打包器简单使用记录
Posted evenyao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Parcel 打包器简单使用记录相关的知识,希望对你有一定的参考价值。
本文是构造 UI 轮子过程中搭建项目初始化时使用 Parcel
作为打包器的简要使用记录。
安装
参考 官方文档
使用 npm
进行 parcel-bundler
的安装。
npm i -D parcel-bundler
为什么要用 -D ? 如果一个
npm
包是给用户使用的,不用加-D
。如果是给开发者使用,需要加-D
。(或者全局安装)
![技术分享图片](https://upload-images.jianshu.io/upload_images/12904618-834554d9c0919d58.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/645/format/webp)
打包
安装完成之后,需要进行打包的操作。
使用下列命令进行 parcel
的初次打包,如果出现红色报错,就在后面加上 index.html
即可。
./node_modules/.bin/parcel
![技术分享图片](https://upload-images.jianshu.io/upload_images/12904618-43b60a28d93ccbf3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/642/format/webp)
注意: 这里还需要注意的问题的是,初次进入之后。还需要给
package.json
进行配置。因为是runtime-only
模式,所以会出现下列报错。
![技术分享图片](https://upload-images.jianshu.io/upload_images/12904618-0486e0572afaa26e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/995/format/webp)
![技术分享图片](https://upload-images.jianshu.io/upload_images/12904618-3962db6be52f9285.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/920/format/webp)
配置完毕后,还是使用 ./node_modules/.bin/parcel index.html
进行打包编译,或者使用,效果是一样的。
npx parcel index.html
![技术分享图片](https://upload-images.jianshu.io/upload_images/12904618-16543c0a4d987da7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/646/format/webp)
清除缓存
建议先清除第一次编译失败的缓存。或者在末尾使用 --no-cache
rm -rf .cache
![技术分享图片](https://upload-images.jianshu.io/upload_images/12904618-6d8bab99d9bc4172.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/592/format/webp)
以上是关于Parcel 打包器简单使用记录的主要内容,如果未能解决你的问题,请参考以下文章