包裹打包机：类似于Webpack，但毫不费力

关于启动新JavaScript项目，我最不喜欢的事情之一是设置编写现代JavaScript所需的所有配置。 我很高兴地拒绝将Webpack配置提交到内存，但是每次启动项目时，结果都是一种不愉快的感觉。

如果我在大多数情况下正在编写React应用，那么大部分问题可以通过脚手架工具解决。 利用 ，所有讨厌的Webpack配置都被隐藏起来，直到弹出为止。

[Git要点： Git版本控制入门 。 ? Git和GitHub的20个基本指针 。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

但是，当我开始撰写有关生成艺术的最新系列文章时，我最终借用了一个ES6入门项目，并为P5.js添加了一些样板。 复制并粘贴项目的脚手架可以很好地工作，但是当有人将我介绍给Parcel时 ，我立即抓住机会进行了评估。 我将把我整理的P5.js ES6入门手册用于第一篇艺术 创作 专栏 ，然后使用Parcel重写它，以了解其工作原理。

包裹捆扎机在行动

在我眼中， Parcel 站上的“ Hello World”示例声称您可以使用所有新的和新颖的ES6功能简单地编写HTML，CSS和JavaScript，而根本不必编写任何配置。 只需安装软件包并将其指向您的主HTML文件即可。 任何转换，翻译，打包，甚至依赖项安装都可以为您解决。 真的吗 让我们来看看。

推荐使用Parcel入门的方法是全局安装软件包。 这对我来说是很奇怪的，一直在通过项目建议全局安装，然后使用全局处理程序转换为本地安装（想想Grunt和Grunt CLI）。 还有一个本地安装选项，因此您可以随时选择本地路由。 我将深入探讨：

全局安装公开的命令需要指向一个HTML文件，此后它可以监视更改，重新打包代码并执行热模块重新加载。 我将设置一个基本的HTML文件来启动，然后在整个过程的其余部分运行Parcel：

然后，我将运行 。 到目前为止看起来还不错：

Parcel创建了一个目录，并将我的HTML文件（原样）放入其中。

好的，下一步是添加一个JavaScript文件并更新HTML文件以直接包含该JavaScript文件：

保存后，Parcel会构建一个JavaScript文件和一个映射文件，将其放入目录，并使用其中的哈希键更新对脚本的引用，但是我没有看到期望的控制台输出。 不过，一旦刷新页面，便可以开展业务。 我可以更改log语句的消息，然后Parcel立即重新打包并执行该代码。

包裹通过测试

到目前为止，这非常不错，尽管非常基本。 回到编写JavaScript代码的超级可访问风格，这很吸引新手。 不过，我想进一步介绍它，并测试自动安装依赖项的声明。 我们的P5.js入门程序包括对P5的依赖关系，因此我只需在index.js文件中添加必需的import语句，然后看看会发生什么。 我还将添加列出P5对象上的键的日志语句，以证明它在那里：

刷新需要一些时间，但是我可以看到Parcel下载了依赖项并重新打包，然后P5方法显示在控制台中：

哇。 从开发经验的角度来看，我已经印象深刻。 从我的角度来看，我运行了一个命令，然后只需要编写代码。 一个好的Web应用程序捆绑器还有很多其他功能，但是Parcel通过了嗅探测试，然后通过了一些测试。

下周，我们将讨论Parcel可以自动处理的其他文件类型，并深入研究如何将应用程序捆绑生产。 想带包裹去兜风吗使用Parcel推出了P5.js入门版本，您可以下载该版本 ，并与Webpack版本进行比较。

有疑问或意见吗我们继续在Twitter上进行对话： @freethejazz 。

From: https://www.infoworld.com/article/3337242/parcel-bundler-like-webpack-but-effortless.html

文章知识点与官方知识档案匹配，可进一步学习相关知识Git技能树首页概览3064 人正在系统学习中 相关资源：wrap::open_book:?一个高效灵活的Go(golang)自动换行包_go自动…