Parcel.js + Vue 2.x 极速零配置打包体验教程
继 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 极速零配置打包体验教程，希望对大家有所帮助，如果大家有所帮助。
相关推荐
-
Vue2.x中的父组件传递数据至子组件的方法
父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-girl-group> </div> </template> script <script> import vGirlGroup from './GirlGroup' export default { name: 'girl', components: { vGirlGro
-
详解Vue2.x-directive的学习笔记
除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件--然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令. 官方建议directive是对纯 DOM 元素进行底层操作使用,一般情况下还是建议使用组件的复用. directive的意义 自定义指令是用来操作DOM的. 尽管数据驱动是Vue的核心之一,但是在实际情况下,并不是所有的情况都可以用数据来驱动视图,我们不
-
vue2.X组件学习心得(新手必看篇)
VUEJS学习网址:https://cn.vuejs.org/ 此文章是用来记录自己的学习和实践心得. 关注点:父子组件之间的通信 看图说话: Pass Props 子组件本身与父组件是孤立的,通过子组件中显示声明的props属性,接收父组件数据; 父组件的数据更新时,子组件的prop会跟着更新: 此数据流动是单向的(看着); Emit Events 子组件使用$.emit(fn)向外抛出自己的内部触发的事件; 父组件是否监听?如果父组件需要监听,使用v-on绑定监听,触发对应事件; 以上为通用
-
详解Vue2.X的路由管理记录之 钩子函数（切割流水线）
$route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生改变 关键字:路由 变 钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数) 两者关系: 钩子函数 ---> 导航 :钩子函数 主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做
-
Parcel.js + Vue 2.x 极速零配置打包体验教程
继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 "极速零配置Web应用打包工具" 简单接触了一下,单从效率上来说,确实要比 webpack 强上不少,可坑也挺多,未来升级之后应该会逐渐普及 官方文档:https://parceljs.org/getting_started.html 官方 GitHub:https://github.com/parcel-bundler/parcel 一.基本用法 Par
-
全新打包工具parcel零配置vue开发脚手架
parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上 项目地址: https://github.com/w3c-king/parcel-vue 初始化项目 $ git clone https://github.com/w3c-king/parcel-vue.git 安装依赖 $ cd parce-vue $ npm install 其中 parcel-bundler 是主要的工具,对于 vue 结尾的单文件,需要单独处理文件类型,
-
从parcel.js打包出错到选择nvm的全部过程
遇到问题 我在使用parcel.js打包项目的时候出现了下面的错误: 我在仔细检查完代码并且核实项目配置没有问题后,没办法只能求助万能的Google,结果在GitHub上找到了错误的原因,parcel.js使用了Async 函数,默认Node.js 8以上才支持的,低于8的话需要使用babel配置.我查看了一下自己的Node.js版本,如下: 找到问题原因后,我想升级一下node不就解决问题了.但又一想,公司最近在做的项目有用到node,贸然升级项目报错就麻烦了.这时候,我想到了nvm,其实很早
-
vue-cli3脚手架的配置及使用教程
这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行
-
详解Vue快速零配置的打包工具——parcel
本文介绍了Vue快速零配置的打包工具--parcel,分享给大家,具体如下: 特性 快速打包 打包所有资源 自动转换 代码拆分 模块热替换 友好的错误记录 如何工作 Parcel 将 资源 树转换成 包(bundles) 树.许多其它的打包工具基本上是基于 JavaScript 资源,还有附加在其上的其它格式的资源.例如,在 JS 文件中内联成字符串. Parcel是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置. 构建资源树 Parcel 接受单个入口资源作为输入
-
vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决
目录 proxy 配置确认.解析 原因 一 原因二 注意 详解 pathRewrite changeOrigin 总结 proxy 配置确认.解析 devServer: { https: true, // 开启https模式 // 配置服务器代理 proxy: { '/api': { // 匹配访问路径中含有 '/api' 的路径 target: 'http://localhost:3000/', // 测试地址.目标地址 changeOrigin: true, ws: true, // 是否开
-
require.js+vue开发微信上传图片组件
由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou
-
Vue中使用vux的配置详解
Vue中使用vux的配置,分为两种情况: 一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目 二.想在已创建的Vue工程
-
详解Nuxt.js Vue服务端渲染摸索
本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/ Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可. Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的. 我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使网站无法在搜索引擎中被用户搜索到.(2)用
-
使用D3.js+Vue实现一个简单的柱形图
最近想在Vue的项目里尝试使用d3.js,封装一些常用的图表.这里记录一下自己搭建项目的过程,以及实现一个简单的柱形图.不了解D3的请移步D3 Data-Driven Documents,它是基于数据驱动文档工作方式的一款JavaScript函数库,主要用于网页作图.生成互动图形,是最流行的可视化库之一. 说明 采用Vue-cli脚手架快速搭建项目 npm 安装 D3 实现一个简单的柱形图 项目搭建 使用vue-cli搭建单页应用: # 安装 vue-cli $ npm install --gl