{"id":22736,"date":"2024-01-25T03:01:56","date_gmt":"2024-01-25T02:01:56","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/guia-tutorial-inicial-de-parcel-automatizadores-en-javascript\/"},"modified":"2024-06-03T18:44:29","modified_gmt":"2024-06-03T17:44:29","slug":"guia-tutorial-inicial-de-parcel-automatizadores-en-javascript","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/initial-tutorial-guide-for-parcel-automators-in-javascript\/","title":{"rendered":"Parcel Getting Started Tutorial Guide: Automators in JavaScript"},"content":{"rendered":"<p>In the world of web development, task automation has become essential to speed up the process of creating applications and websites. One of the most popular tools for this purpose is Parcel, a fast and easy-to-use module packager. In this Parcel starter tutorial guide, I&#039;ll show you how to get started with this powerful tool and get the most out of its features.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/initial-tutorial-guide-for-parcel-automators-in-javascript\/#%C2%BFQue_es_Parcel_y_por_que_deberias_utilizarlo\" >What is Parcel and why should you use it?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/initial-tutorial-guide-for-parcel-automators-in-javascript\/#Configuracion_inicial_de_Parcel\" >Initial Parcel Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/initial-tutorial-guide-for-parcel-automators-in-javascript\/#Creacion_de_tu_primer_archivo_HTML\" >Creating your first HTML file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/initial-tutorial-guide-for-parcel-automators-in-javascript\/#Creacion_de_tu_primer_archivo_JavaScript\" >Creating your first JavaScript file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/initial-tutorial-guide-for-parcel-automators-in-javascript\/#Ejecucion_de_tu_proyecto_con_Parcel\" >Execution of your project with Parcel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/initial-tutorial-guide-for-parcel-automators-in-javascript\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/initial-tutorial-guide-for-parcel-automators-in-javascript\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_Parcel_y_por_que_deberias_utilizarlo\"><\/span>What is Parcel and why should you use it?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Parcel is a bundler or module packager for web applications. Its main advantage is its ease of use, since it requires minimal configuration. Additionally, Parcel is extremely fast, thanks to its focus on concurrency and task parallelization.<\/p>\n<p>One of the standout features of Parcel is its ability to automatically support a wide range of technologies, such as JavaScript, CSS, HTML, images, fonts, and more. This means you don&#039;t have to worry about manually configuring each of these technologies, Parcel takes care of it for you.<\/p>\n<p>Another advantage of Parcel is its ability to perform automatic code transpilation and minification. This means you can write your code in advanced languages like TypeScript or JSX, and Parcel will compile it into cross-browser-compatible JavaScript.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Configuracion_inicial_de_Parcel\"><\/span>Initial Parcel Setup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To start using Parcel, you must have Node.js installed on your computer. You can download and install it from its official website. Once you have installed Node.js, you can install Parcel globally by running the following command in your terminal:<\/p>\n<pre>\nnpm install -g parcel-bundler\n<\/pre>\n<p>Next, create a new folder for your project and go to it from your terminal. Once inside your project folder, run the following command to initialize a Parcel project:<\/p>\n<pre>\nparcel init\n<\/pre>\n<p>This command will create a file <code>package.json<\/code> in your project folder, which contains the basic configuration of your project.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creacion_de_tu_primer_archivo_HTML\"><\/span>Creating your first HTML file<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Parcel uses an HTML file as the entry point for your application. Create a new HTML file in your project folder and name it whatever you want:<\/p>\n<pre>\ntouch index.html\n<\/pre>\n<p>Open the file <code>index.html<\/code> in your favorite code editor and add the following HTML code:<\/p>\n<pre>\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;es&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;My first application with Parcel&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1&gt;Hello World!&lt;\/h1&gt;\n  &lt;script src=&quot;.\/index.js&quot;&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<p>This basic HTML code creates a web page with a header that displays a greeting of &quot;Hello World!&quot; and load a JavaScript file called <code>index.js<\/code> using the tag <code>&lt;script&gt;<\/code>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creacion_de_tu_primer_archivo_JavaScript\"><\/span>Creating your first JavaScript file<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Create a new JavaScript file in your project folder and name it <code>index.js<\/code>:<\/p>\n<pre>\ntouch index.js\n<\/pre>\n<p>Open the file <code>index.js<\/code> in your code editor and add the following basic JavaScript code:<\/p>\n<pre>\nconsole.log(&quot;Hello World!&quot;);\n<\/pre>\n<p>This code simply prints &quot;Hello World!&quot; in the browser console.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ejecucion_de_tu_proyecto_con_Parcel\"><\/span>Execution of your project with Parcel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Once you have created your HTML file and your JavaScript file, you can run your project with Parcel. From your terminal, run the following command:<\/p>\n<pre>\nparcel index.html\n<\/pre>\n<p>Parcel will start a local server on your machine and show you the URL where you can access your application in your browser. You will also be able to see detailed log messages in your terminal that will tell you the build status of your project.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In this Parcel starter tutorial guide, you&#039;ve learned how to start using this powerful automation tool in your web development projects. Parcel allows you to quickly package your modules and simplify the development process, without requiring complex configuration. Now you&#039;re ready to make the most of Parcel in your next projects!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Is Parcel compatible with other technologies such as React or Vue.js?<\/strong><\/p>\n<p>Yes, Parcel supports a wide range of technologies, including React, Vue.js, TypeScript, and more. You can use Parcel as a module packager in projects that use these technologies.<\/p>\n<p><strong>Does Parcel support development environments like webpack or Gulp?<\/strong><\/p>\n<p>Yes, Parcel can be used in conjunction with other task automators like webpack or Gulp, as Parcel is agnostic and not limited to a single type of configuration or usage.<\/p>\n<p><strong>Can Parcel be used in mobile applications?<\/strong><\/p>\n<p>Yes, Parcel can be used in both native and hybrid mobile applications, as long as these applications use web technologies such as HTML, CSS, and JavaScript.<\/p>\n<p><strong>Where can I find more information about Parcel?<\/strong><\/p>\n<p>You can learn more about Parcel and its features in the official Parcel documentation on the Parcel website. <a href=\"https:\/\/parceljs.org\/es\/\" rel=\"nofollow noopener\" target=\"_blank\">Parcel<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>En el mundo del desarrollo web, la automatizaci\u00f3n de tareas se ha vuelto imprescindible para agilizar el proceso de creaci\u00f3n de aplicaciones y sitios web. Una de las herramientas m\u00e1s populares para este prop\u00f3sito es Parcel, un empaquetador de m\u00f3dulos r\u00e1pido y f\u00e1cil de usar. En esta gu\u00eda tutorial inicial de Parcel, te mostrar\u00e9 c\u00f3mo [&hellip;]<\/p>","protected":false},"author":1,"featured_media":22737,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1126,2207],"tags":[637,205,358,635,185,2208,636,485],"class_list":["post-22736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-automatizadores","category-nodejs","tag-automatizadores","tag-blog","tag-guia","tag-inicial","tag-javascript","tag-nodejs","tag-parcel","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=22736"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/22737"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=22736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=22736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=22736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}