简述parcel
简单来说，parcel就是和webpack一样，主要功能都是打包项目文件；parcel.js的官方网站 :https://parceljs.org/parcel.js的github：https://github.com/parcel-bundler/parcel
parcel.js的简介如下：
为什么要使用parcel?
可以参考下面的介绍：
好吧进入正题，
之前在parcel刚兴起的时候，是通过justjavac大神的介绍开始接触的，而且自己之前也有尝试了一下，并且结合了gulp.js来作为压缩项目文件的，但是在做着做着的时候意识到仿佛好像只有react.js才可以和parcel.js相配合一样，但是我最近是基于vue.js来写的，这样急匆匆换成react.js感觉很不好，在想有没有parcel.js是可以和vue.js一起的.....于是，就放在一边了....今天刚好有看到相关的插件...所以有才开始了，parcel的打包流程.....
先看一下大概的项目目录：
这是我加了gulp在里面的一个大概的项目样子，这次先不涉及gulp这方面的讲解；
基础部署
我使用的是vscode编辑器，包管理工具是npm;
引入parcel.js
在文件夹里，通过在终端输入这是全局的引入：npm install -g parcel-bundler我一般是在项目目录中引入：
npm install --save-dev parcel-bundler
初始化配置文件:
npm init -y就会出现如下的基础配置文件，用红线框出来的是我后来自己加上去的，初始化的配置文件信息就是红线框外的信息：这些信息有一些描述性的基础信息是可以自己来编写的：
这样基本的配置信息的就完成了，后面如果自己再加上其他插件或者npm 的其他命令，里面的配置信息就会改变，当然配置自己的npm命令可以自己在配置文件中编写，例如上面的start和build命令；下面会讲到的。
新建index.html和index.js文件；
初步上手，记得index.html得写在根目录；index.html文件：
index.js文件：
可以简单写console.log()来判断一下是否被调用：
接着可以运行一下命令，查看一下本地服务器的运行：
parcel index.html或者在package.json文件中配置了start命令的可以直接使用npm start如下：
上面有注意到那个时间，可能我是电脑有点卡，跑得不太快，一般来说都是比较快的；基本的操作到了这里就可以了，后面小伙伴们可以随意加不同前端工作流插件进去；
vue文件加入parcel中：
添加命令：用于添加parcel的vue插件
npm install --save-dev parcel-plugin-vue
添加vue.js可以通过命令
npm install --save-dev vue
也可以通过cdn来添加 下面是我的尝试vue的目录：
vue 再parcel中的文件内容
你需要再根目录的index.html页面引入vue文件夹的index.js;下面是index.js的内容:
下面是app.vue的内容：
下面是index.html中的内容:
然后直接运行parcel index.html 或者 npm start就可以得出下面的页面了；
值得注意的是：
如果你是使用es6 语法的记得在命令行输入：
用于安装 Babel的转化器，来将es6转换es5；
npm install --save-dev babel-preset-es2015 babel-plugin-transform-runtime
还有用于sass,react，gulp等等。。。配合parcel来进行的打包的
我将于在下一篇文章中使用gulp.js配合parcel来进行配合；
网友评论