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 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
js中this的用法实例分析
Jan 10 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
js编写选项卡效果
May 23 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 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生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python画图学习入门教程
2016/07/01 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python实现结构体代码实例
2020/02/10 Python
Python3 读取Word文件方式
2020/02/13 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
工程专业毕业生自荐信范文
2013/12/25 职场文书
调查研究项目计划书
2014/04/29 职场文书
个人向公司借款协议书
2014/10/09 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL