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 极速零配置打包体验教程，希望对大家有所帮助，如果大家有所帮助。
相关文章
使用 JScript 创建 .exe 或 .dll 文件的方法
JScript 是由微软开发的活动脚本语言，基于 ECMAScript 规范实现。Internet Explorer 中的 JavaScript，实际上是指 JScript。2011-07-07
当页面上存在一个图片元素时如：<img src='xxxx' alt="" />,页面加载中ie7、8跟chrome下图片的onload事件非常奇怪，有后完全不触发，有时候触发后进行改变某些元素的操作，操作结果无效。2011-07-07
这篇文章主要汇总了JavaScript常用的工具函数，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍了Javascript中判断对象是否为空,本文利用Javascript 中的对象就是一个字典的特性,检查对象中有没有键值对实现判断对象是否为空,需要的朋友可以参考下2015-06-06
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
今天小编就为大家分享一篇关于JavaScript查看代码运行效率console.time()与console.timeEnd()用法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
用js写一段小程序，但是又觉得使用浏览器去运行挺麻烦的，下面为大家介绍下如何使用java程序调用javascript程序，有类似需求的朋友可以参考下哈，希望对大家有所帮助2013-07-07
这篇文章主要介绍了js实现的在线调色板功能,结合完整实例形式分析了调色板的完整实现步骤与相关操作技巧,需要的朋友可以参考下2016-12-12
这篇文章主要教大家简单实现JS计算器功能,实现小数点校验，重复计算，以及大量更符合用户体验的操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
给所有的超级练级都加上onmousemove时间的js代码...2007-08-08
本篇文章主要是对JS删除字符串最后一个字符的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
最新评论