parcel是一个类似于webpack的前端打包工具。相对于webpack。它的优势在于不需要繁琐的配置。
首先安装
npm install -g parcel-bundler复制代码
一般来说。用户使用的组件。不需要配置。如果是给开发者使用建议是用-D。或者-g全局安装
初始化
npm init -y
复制代码
现在就可以使用了。两种方法，第一种使用绝对路径
./node_modules/.bin/parcel index.html
第二种。npx, npx指令的意思是在当前目录下查找。免去记忆路径的烦恼，
npx parcel index.html
只要调用，它就会自动安装所需要的所有东西。相比webpack。真的是太省心了
安装时,如果安装 node-sass 失败，那么请直接百度或者谷歌搜索「node sass 安装失败」
稍等几秒钟，它就会提示你可以打开 http://localhost:1234网址
一般来说，这个网站打开之后。可能会报错。
[图片上传中...(image-598500-1579535661090-3)]
他说你使用的是runtime版本,其实还是少配置了东西。这个东西在Vue官方文档里面有。
在package.json里添加一行就可以了
"alias": {
"vue" : "./node_modules/vue/dist/vue.common.js"
}复制代码
再重新调用parcel,我们会发现问题依旧存在。这是因为parcel读取了刚才的缓存文件。同样有两种解决方法。第一种禁用缓存(推荐)
npx parcel index.html --no-ca
第二种直接删除缓存文件(.cache)
[图片上传中...(image-c8ef92-1579535661090-2)]
采用最简单的调用他依然能够监听代码的改变实时打包, 相对而言webpack真的像智障一样。
常见的两种报错
No entres found 报错
[图片上传中...(image-81ddb1-1579535661090-1)]
在 parcel 后面添加 index.html 即可
比如：
./node_modules/.bin/parcel 改成./node_modules/.bin/parcel index.html
npx parcel 改成 npx parcel index.html复制代码
2 ERERM 报错
[图片上传中...(image-e8443-1579535661090-0)]
改用全局安装的 parcel 试试运气吧：
npm i -g parcel
parcel index.html --no-cache
