parcel零配置打包项目

 简述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来进行配合；