前端进阶（10） - webpack 之外的另一种选择：parcel

sutaking 发布于2019-08-23 11:59 / 574人阅读

摘要：便提供了一个额外的选择，对于不喜欢配置的开发者尤其友好，因为没有配置文件，仅有的少量配置项也是从命令行输入。另外会自动识别安装在中的插件，然后导入，而无需手动配置。与相比，零配置是最大的特点与优势，但没有功能强大，也缺少了些灵活性。

webpack 之外的另一种选择：parcel

之前有写过一篇 webpack 之外的另一种选择：rollup，这次算是姊妹篇，介绍另外一个工具 parcel.

现在前端打包基本上都会用 webpack，但经常使用 webpack 的开发者基本都有一个体会：配置比较复杂，尤其是有很多项目的时候，更新需要到处改配置。

parcel 便提供了一个额外的选择，对于不喜欢配置的开发者尤其友好，因为 parcel 没有配置文件，仅有的少量配置项也是从命令行输入。另外 parcel 会自动识别安装在 package.json 中的 parcel 插件，然后导入，而无需手动配置。

1. parcel 1.1 安装

# 全局
npm install -g parcel-bundler

# 本地
npm install --save-dev parcel-bundler

1.2 开发

parcel 可以使用任何类型的文件作为入口，但一般是以 HTML 或 JavaScript 文件作为入口文件。

当以一个 html 文件作为入口进行开发时，在 html 文件中，你可以声明多个 js 入口文件，也可以声明多个 css 入口文件，也可以加载其他的静态资源（如图片）。




  
  Title

但一般都会只有一个 js 入口，css 使用 js 来加载。




  
  Title

运行开发命令

parcel path/to/target.html

打包

parcel build path/to/target.html

以一个 js 文件作为入口进行开发也是类似的，可以参考官方文档 https://parceljs.org/。

2. parcel vs webpack

与 webpack 相比，零配置是 parcel 最大的特点与优势，但 parcel 没有 webpack 功能强大，也缺少了些灵活性。

3. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

云服务器 GPU服务器 win10版本选择之外 Parcelable Parcel

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97799.html

前端进阶（6） - webpack 之外的另一种选择：rollup

摘要：之外的另一种选择对前端来说是再熟悉不过的工具了，它提供了强大的功能来构建前端的资源，包括等语言脚本，也包括等二进制文件。所以，一个不错的选择是，应用使用，类库使用。 webpack 之外的另一种选择：rollup webpack 对前端来说是再熟悉不过的工具了，它提供了强大的功能来构建前端的资源，包括 html/js/ts/css/less/scss ... 等语言脚本，也包括 ima...

stefan 2019-08-23 11:28 评论0 收藏0
前端进阶（14） - 如何提升前端性能和响应速度

摘要：一般建议文件最大不超过。按需加载可以减小首屏加载文件的体积，达到提高响应速度的目的。如果你的项目不需要处理静态资源如图片，也不需要按需加载，并追求前端高性能的话，可以尝试。如何提升前端性能和响应速度下面大多是从前端工程化的角度给出的优化建议，如果需要了解语法上的优化，可以参考：如何提高页面加载速度编写高效的JavaScript Web前端性能优化进阶 - 完结篇 1. 原生...

lylwyy2016 2019-08-29 17:04 评论0 收藏0
前端进阶（14） - 如何提升前端性能和响应速度

摘要：一般建议文件最大不超过。按需加载可以减小首屏加载文件的体积，达到提高响应速度的目的。如果你的项目不需要处理静态资源如图片，也不需要按需加载，并追求前端高性能的话，可以尝试。如何提升前端性能和响应速度下面大多是从前端工程化的角度给出的优化建议，如果需要了解语法上的优化，可以参考：如何提高页面加载速度编写高效的JavaScript Web前端性能优化进阶 - 完结篇 1. 原生...

Airy 2019-08-23 12:30 评论0 收藏0
前端构建工具整理

摘要：常见前端构建工具的分类和对比是附带的包管理器，是内置的一个功能，允许在文件里面使用字段定义任务在这里，一个属性对应一段脚本，原理是通过调用去运行脚本命令。前文端技术范围不断发展，前端开发不仅限于直接编写html，css和javascript，Web应用日益庞大，代码也更加庞大，因此许多新的思想（例如模块化和工程化等）和框架（React和Vue等），以及新的语言（Es6 TypeSc...

leo108 2019-08-23 10:53 评论0 收藏0
前端进阶（9） - js 性能优化利器：prepack

摘要：性能优化利器性能优化性能优化不外乎从三个角度入手开发者在编写程序时，尽量避免不必要的冗余代码，包括冗余的第三方库首先要避免不必要的冗余代码，包括不必要的闭包不必要的变量与函数声明不必要的模块分割等。 js 性能优化利器：prepack 1. js 性能优化 js 性能优化不外乎从三个角度入手： 1.1 开发者在编写程序时，尽量避免不必要的冗余代码，包括冗余的第三方库首先要避免不必要的...

JouyPub 2019-08-23 11:59 评论0 收藏0