parcel小试

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