继 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
内容版权声明：除非注明，否则皆为本站原创文章。