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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
php自动适应范围的分页代码
2008/08/05 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
简单的php文件上传(实例)
2013/10/27 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
python中List的sort方法指南
2014/09/01 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
iPython pylab模式启动方式
2020/04/24 Python
Django自带的用户验证系统实现
2020/12/18 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
教师节活动主持词
2014/04/02 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
班主任培训研修日志
2015/11/13 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python