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网址
一般来说,这个网站打开之后。可能会报错。
他说你使用的是runtime版本,其实还是少配置了东西。这个东西在Vue官方文档里面有。
在package.json里添加一行就可以了
"alias": { "vue" : "./node_modules/vue/dist/vue.common.js" }复制代码
再重新调用parcel,我们会发现问题依旧存在。这是因为parcel读取了刚才的缓存文件。同样有两种解决方法。第一种禁用缓存(推荐)
npx parcel index.html --no-ca
第二种直接删除缓存文件(.cache)
采用最简单的调用他依然能够监听代码的改变实时打包, 相对而言webpack真的像智障一样。
常见的两种报错
No entres found 报错
在 parcel 后面添加 index.html 即可
比如:
./node_modules/.bin/parcel 改成./node_modules/.bin/parcel index.htmlnpx parcel 改成 npx parcel index.html复制代码
2 ERERM 报错
改用全局安装的 parcel 试试运气吧:
npm i -g parcelparcel index.html --no-cache复制代码