有时候，您不需要像Vue这样的框架，也不需要React来演示JavaScript中的思想或概念。例如，您只需要一个与框架无关的纯JavaScript开发环境来处理诸如服务工人、web工作者、新JavaScript语法或IndexedDB之类的东西。在这篇博客文章中，您将学习如何使用ParcelJS快速原型化纯JavaScript应用程序，以创建这样一个零配置和低开发开销的环境。ParcelJS是一个成熟的web应用程序绑定器，它支持CodeSandbox等云开发平台来创建纯JavaScript项目。它的开发人员将其定位为一个快速的零配置捆绑包，具有以下特性：快速捆绑时间。零配置代码拆分。热模块更换，大数据库，无需配置。在需要时使用Babel、postcs和PostHTML进行自动转换。packet提供了对JS、CSS、HTML、文件资产等的现成支持，而不需要任何插件或加载程序。当遇到错误时，通过打印语法突出显示的代码帧来记录可读的错误。对于这篇博客文章的用例，即快速原型化普通JavaScript应用，这些都是很有前途的特性。然而，北京大数据公司有哪些，ParcelJS还具有帮助您构建高度复杂的应用程序的能力和灵活性。"ParcelJS有很多现成的特性，怎么做淘客推广，需要零配置。这是一个可靠的工具，可以快速开发JavaScript应用程序，nba大数据，并避免在JavaScript足够的情况下，使用框架进行快速概念验证。"在推特上留言您可以在GitHub上的packet prototype repo上找到这个练习的精妙版本。不过，我鼓励你跟随帖子，逐步构建ParcelJS应用程序原型，以便更好地理解ParcelJS为你做的重担，以及它的热模块更换系统的一些怪癖。设置零配置ParcelJSParcelJS的入口点可以是任何类型的文件。但是，建议使用JavaScript或HTML文件，因为ParcelJS将遵循文件中声明的依赖项来构建整个应用程序。这个条目文件将是NPM项目的一部分；因此，您需要安装NPM。如果需要，请按照以下步骤安装NPM。要开始，请转到您的终端，并将您要存储此学习项目的目录设为当前工作目录。之后，创建一个名为parceljs prototype的文件夹，并将其作为当前工作目录。您可以使用以下命令轻松完成此操作：mkdir parceljs原型和cd parceljs原型这一行程序创建parceljs原型目录，然后将其作为当前工作目录。接下来，初始化NPM项目并在本地安装parcel bundler：npm初始-ynpm安装包绑定器--保存开发安装完成后，在首选的IDE或代码编辑器中打开项目。你可以运行代码。或者网络风暴。打开当前工作目录（如果已安装Visual Studio代码或WebStorm的命令行工具）。要运行您的项目，您将使用NPM脚本。更新包.json要包括开发和构建脚本：{"name"："parceljs原型"，"version"："1.0.0"，"说明"：""，"主"：索引.js","脚本"：{"dev"："parcel"，"build"："地块构建"},"关键字"：[]，"作者"：""，"license"："ISC"，"开发依赖性"：{"包裹捆绑商"："^1.10.3"}}你现在需要创建的是应用程序的入口点。由开发人员选择要用作入口点的文件类型。对于本教程，您将使用索引.html以及索引.js将位于src目录下的文件。为项目创建以下文件结构：parceljs原型|- 包.json|-/src公司|- 索引.html|- 索引.js可以通过发出以下命令快速创建这些文件：macOS/Linux系统：mkdir src和touch src/索引.htmlsrc公司/索引.js窗户：mkdir src&&echo.>src/索引.html&&回音。>src/索引.jsmkdir是一个用于创建目录的跨平台命令。但是，touch只在Unix和类Unix的操作系统中可用。echo是一种相当于触摸的Windows。回音。创建一个包含一个空行的文件。为包含以下内容的两个文件赋予一些生命：//src公司/索引.jsconst createElement=消息=>{常量元素=文档.createElement（"div"）；element.innerHTML=消息；返回元件；};document.body.appendChild（createElement（"ParcelJS ready to ship！"）;```html格式ParcelJS原型```在src中/索引.html，数据与大数据，在标记中，加载索引.js通过标记文件。```html格式当您使用相对路径将主JavaScript文件链接到主HTML文件中时，ParcelJS将为您处理JavaScript文件并在中替换其引用`索引.html`输出文件的URL。你有你需要的旋转这个应用程序！ParcelJS附带一个内置的开发服务器，无需安装任何其他依赖项。当您更改源文件时，此开发服务器会自动重建应用程序。为了提高您的开发体验和效率，ParcelJS dev服务器附带了[Hot Module Replacement](https://parceljs.org/hmr.html)开箱即用。要运行应用程序，您需要将"parcel"指向您的条目文件。回到`包.json`并将ParcelJS NPM脚本中的占位符替换为条目文件名，在本例中为`src/索引.html`:{"name"："parceljs原型"，"version"："1.0.0"，"说明"：""，"主"：索引.js","脚本"：{"dev"："包裹src/索引.html","build"："地块构建src/索引.html"},"关键字"：[]，"作者"：""，"license"："ISC"，"开发依赖性"：{"包裹捆绑商"："^1.10.3"}}```在命令行中，执行dev NPM脚本：npm运行开发几毫秒后，您将在命令行中看到以下消息：服务器运行于：1234个✨ 内置731ms。将浏览器指向该地址，或单击以下链接将其打开：：1234。马上就可以看到你的消息了！在浏览器屏幕中打印：嗯，那很简单！剩下的就是开始添加更多的JavaScript模块、样式表和图像资产，使这个应用程序更加精致。使用零配置ParcelJS导入模块创建另一个向DOM添加另一个元素的模块。在src下，创建横幅.js:macOS/Linux系统：触摸src/横幅.js窗户：回音。>src/横幅.js打开此文件并填充此文件：//src公司/横幅.jsconst createBanner=（）=>{常量链接=文档.createElement（"a"）；link.innerHTML="Devon Govett学习ParcelJS。"；链接.href= "https://parceljs.org/";链接目标="u空白"；返回链路；};导出默认createBanner；保存对src所做的更改/横幅.js.接下来，更新src/索引.js如下所示并保存文件：//src公司/索引.js从""导入createBanner/横幅.js";const createElement=消息=>{常量元素=文档.createElement（"div"）；element.innerHTML=消息；返回元件；};document.body.appendChild（createElement（"ParcelJS ready to ship！"）;document.body.appendChild（createBanner（））；浏览器现在显示下面带有超链接的邮件：然而，HMR系统引入了一个问题。在src末尾/索引.js，只需按键创建新行并保存文件。做几次。现在，看看浏览器。。。您将看到消息和超链接在每次保存时都被反复复制！发生什么事？GitHub问题#289包裹捆绑式回购有一些答案。主JavaScript文件src/索引.js，使用JavaScript创建DOM元素，并使用document.body.appendChild（）方法。但是，只要src/索引.js更新后，DOM操作逻辑将重新运行，加载应用程序的浏览器选项卡将最终具有重复的DOM元素。进一步了解ParcelJS如何处理热模块更换是必要的。ParcelJS热模块更换从ParcelJS关于热模块更换的文档中，我们可以了解以下关键概念：HMR在运行时自动更新浏览器中的模块，而不需要刷新整个页面。应用程序状态可以在整个小的更改过程中保持不变。HMR支持JS和CSS文件。在生产模式下，HMR将自动禁用。HMR是如何工作的？ParcelJS重建了改变了的一切。它向运行代码的所有客户端发送更新。新代码将替换旧代码，并与所有父代码一起重新评估。ParcelJS提供热模块用于钩住HMR进程的API。通过这个API，您可以在模块即将被释放或新版本即将到来时通知您的代码。在这个API中，有两种方法非常突出：module.hot.accept模块以及热处理模块.ParcelJS文件解释说。。。module.hot.accept模块使用回调函数调用，该函数在更新该模块或其任何依赖项时执行。热处理模块获取一个回调，该回调在该模块即将被替换时调用。如果(热模块) {热处理模块（函数（）{//模块即将更换});module.hot.accept模块（函数（）{//模块或其依赖项之一刚刚更新});}当使用WebGL和Canvas API或使用JavaScript创建DOM元素时，一些用户注意到了性能问题，因为代码被多次重新运行并且DOM重复发生。关于GitHub问题#289，作者解释如下：