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 相关文章推荐
js中opener与parent的区别详细解析
Jan 14 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
js实现弹框效果
Mar 24 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无序树实现方法
2015/07/28 PHP
PHP实现微信发红包程序
2015/08/24 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python生成九宫格图片
2018/11/19 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
如何利用find命令查找文件
2016/11/18 面试题
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
单位消防安全制度
2014/01/12 职场文书
优秀员工推荐信
2014/05/10 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
刑事法律意见书
2015/06/04 职场文书
无房证明样本
2015/06/17 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
golang定时器
2022/04/14 Golang