简述 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 来进行配合;
来源: http://www.jianshu.com/p/900e11e54f2e