继 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, 零配置打包

直接创建项目目录,用写个一个简单的传统页面

aaarticlea/png;base64,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" alt="" />

然后在项目根目录打开命令行工具,输入以下命令

parcel index.html -p 3030

aaarticlea/png;base64,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" alt="" />

然后在浏览器中打开 http://localhost:3030/ 就能打开刚才开发的页面

上面的命令中 -p 用于设置端口号,如果不设置,则默认启动 1234 端口

parcel 支持热更新,会监听 html、css、js 的改变并即时渲染

// 实际上通过 src 引入的 css、js 无法热更新

开发完成后,输入以下命令进行打包

parcel build index.html

打包后会生成 dist 目录

aaarticlea/png;base64,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" alt="" />

桥豆麻袋,说好的打包呢?怎么还是这么多文件?

骚年莫急,这是用传统写法写的页面,连 package.json 都没有,接下来改造成模块化的项目,就能看到打包的效果了

好吧,那我先手动打开 index.html 看看效果...等等...为啥 css 没被加载?

这是因为打包后的路径都是绝对路径,放在服务器上没问题,如果需要本地打开,就得手动修改为相对路径

二、应用在模块化项目中

正片开始,首先将上面的项目改造成模块化项目

通过 npm init -y 命令创建一个默认的 package.json,并修改启动和打包命令

aaarticlea/png;base64,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" alt="" />

这样就可以直接通过 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 打包项目

最新文章

  1. asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送
  2. LeetCode &quot;Integer Break&quot;
  3. css3之转换
  4. 对bootstrap modal的简单扩展封装
  5. 【转】Sqlserver通过链接服务器访问Oracle的那些事儿!
  6. iOS组件化思路-大神博客研读和思考
  7. xml校验问题
  8. 进程管理之system
  9. 《python机器学习—预测分析核心算法》笔记1
  10. 两种配置大数据环境的方法Ambari以及hadoop源代码安装的步骤
  11. vue启动时候报错
  12. Vue-router的三种传参方式
  13. yii restful和一般路由共存
  14. 2018-2019-1 20189203 《Linux内核原理与分析》第七周作业
  15. xadmin增加用户 除了账号和密码 添加其他信息
  16. 【微信小程序开发】页面配置
  17. js五道经典练习题--第三道实现购物车功能
  18. iOS界面篇 - bounds和frame的相同和区别
  19. 【WinRT】使用 T4 模板简化字符串的本地化
  20. 《Real Time Rendering》第四章 图形变换

热门文章

  1. Lua C API 遍历 table
  2. C# 中 DataTable转换成IList
  3. Android逆向进阶—— 脱壳的奥义(基ART模式下的dump)
  4. 【sping揭秘】12、SpringAOP的实现机制
  5. oracle exp imp日常使用
  6. css实现图片垂直居中
  7. c++之菱形继承问题
  8. 平衡二叉树-AVL树(LL、RR、LR、RL旋转)
  9. N元马尔科夫链的实现
  10. keytool和openssl生成的证书转换