parcel小试

1,136 阅读1分钟

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 报错

No entries found

在 parcel 后面添加 index.html 即可

比如:

./node_modules/.bin/parcel 改成./node_modules/.bin/parcel index.html
npx parcel 改成 npx parcel index.html

2 ERERM 报错

image.png

改用全局安装的 parcel 试试运气吧:

npm i -g parcel
parcel index.html --no-cache