Parcel.js + Vue 2.x 极速零配置打包体验教程


Posted in Javascript onDecember 24, 2017

继 Browserify、Webpack 之后,又一款打包工具 Parcel 横空出世

Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具”

简单接触了一下,单从效率上来说,确实要比 webpack 强上不少,可坑也挺多,未来升级之后应该会逐渐普及

官方文档:https://parceljs.org/getting_started.html

官方 GitHub:https://github.com/parcel-bundler/parcel

一、基本用法

Parcel 可以用 npm 或 yarn 安装,个人习惯用 npm,这篇博客将基于 npm 讲解

首先需要全局安装 Parcel.js    // 当前版本 1.3.0

npm install -g parcel-bundler

然后写一个配置文件...不对,这不是 webpack,这是 parcel, 零配置打包

直接创建项目目录,用写个一个简单的传统页面

然后在项目根目录打开命令行工具,输入以下命令

parcel index.html -p 3030

然后在浏览器中打开 http://localhost:3030/ 就能打开刚才开发的页面

上面的命令中 -p 用于设置端口号,如果不设置,则默认启动 1234 端口

parcel 支持热更新,会监听 html、css、js 的改变并即时渲染

// 实际上通过 src 引入的 css、js 无法热更新

开发完成后,输入以下命令进行打包

parcel build index.html

打包后会生成 dist 目录

桥豆麻袋,说好的打包呢?怎么还是这么多文件?

骚年莫急,这是用传统写法写的页面,连 package.json 都没有,接下来改造成模块化的项目,就能看到打包的效果了

好吧,那我先手动打开 index.html 看看效果...等等...为啥 css 没被加载?

这是因为打包后的路径都是绝对路径,放在服务器上没问题,如果需要本地打开,就得手动修改为相对路径

二、应用在模块化项目中

正片开始,首先将上面的项目改造成模块化项目

通过 npm init -y 命令创建一个默认的 package.json,并修改启动和打包命令

这样就可以直接通过 npm run dev 启动项目,npm run build 执行打包了

之前是全局安装的 parcel,实战中更推荐在项目中添加依赖

npm install parcel-bundler -S

上面是一个传统页面,使用 link 引入的 css

既然要改造为模块化项目,那就只需要引入一个 main.js,然后在 main.js 中引入其他的 css 和 js 文件

所以需要用到 import 等 ES6 语法,那就安装一个 babel 吧

npm install babel-preset-env -S

然后在根目录创建一个 .babelrc 文件,添加以下配置:

{
 "presets": ["env"]
}

再安装一个 css 转换工具,比如 autoprefixer

npm install postcss-modules autoprefixer -S

创建 .postcssrc 文件:

{
 "modules": true,
 "plugins": {
 "autoprefixer": {
  "grid": true
 }
 }
}

官方文档还推荐了一款编译 html 资源的插件 PostHTML,不过这里暂时不需要

自行改造代码,最后 npm run build 打包

可以看到 js 和 css 已经整合,其内容也经过了 babel 和 autoprefixer 的编译

三、在 Vue 项目中使用 Parcel

官方文档给出了适用于 react 项目的配方

但我常用的是 vue,研究了好久,终于找到了方法

依旧使用 index.html 作为入口,以 script 引入 main.js:

<!-- index.html -->
<body>
 <div id="app"></div>
 <script src="./src/main.js"></script>
</body>

// main.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './css/common.css'

Vue.config.productionTip = false

const vm = new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

这里要推荐一个很厉害的插件 parcel-plugin-vue,它让 parcel 和 vue 成功牵手

再加上之前提到的 babel、autoprefixer,最后的 package.json 是这样的:

{
 "name": "ParcelVue",
 "version": "1.0.0",
 "description": "The project of parcel & vue created by Wise Wrong",
 "main": "main.js",
 "scripts": {
 "dev": "parcel index.html -p 3030",
 "build": "parcel build index.html"
 },
 "keywords": [
 "parcel",
 "vue"
 ],
 "author": "wisewrong",
 "license": "ISC",
 "devDependencies": {
 "autoprefixer": "^7.2.3",
 "babel-polyfill": "^6.26.0",
 "babel-preset-env": "^1.6.1",
 "parcel-bundler": "^1.3.0",
 "parcel-plugin-vue": "^1.4.0",
 "postcss-modules": "^1.1.0",
 "vue-loader": "^13.6.1",
 "vue-style-loader": "^3.0.3",
 "vue-template-compiler": "^2.5.13"
 },
 "dependencies": {
 "vue": "^2.5.13",
 "vue-router": "^3.0.1"
 }
}

一定记得在根目录创建 .postcssrc 和 .babelrc 文件

然后 npm install 安装依赖, npm run dev 启动项目,npm run build 打包项目

总结

以上所述是小编给大家介绍的Parcel.js + Vue 2.x 极速零配置打包体验教程,希望对大家有所帮助,如果大家有所帮助。

Javascript 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 #Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 #Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 #Javascript
vue项目常用组件和框架结构介绍
Dec 24 #Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 #Javascript
JS生成随机打乱数组的方法示例
Dec 23 #Javascript
You might like
解析php中die(),exit(),return的区别
2013/06/20 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python实现自动发送邮件功能
2021/03/02 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
一些网络技术方面的面试题
2014/05/01 面试题
财务主管的岗位职责
2013/12/30 职场文书
高中运动会广播稿
2014/01/21 职场文书
大气污染防治方案
2014/05/19 职场文书
公司口号大全
2014/06/11 职场文书
颐和园英文导游词
2015/01/30 职场文书
教师教育教学随笔
2015/08/15 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS