There seems to be an issue with the babel `--watch` feature, as it is not properly updating the es6 folder

I am in the process of developing a basic component library and I want it to be automatically compiled every time I make any changes to my files.

Here is the command I am currently using:

"watch": "babel components/ --out-dir dist --copy-files --ignore test.js --watch"

I have tried experimenting with moving the --watch flag around, but so far it hasn't made any difference as it only runs once.

Just for your reference, I am utilizing @babel/cli v7.8.4. Can anyone advise me on how to configure it to compile each time I save a file? What am I doing wrong with my current command?

javascriptnpmbabeljsbabel-cli

Answer №1

Here are some steps to consider:

"observe": "transpile components using Babel --extensions .jsx --output-directory dist --copy-files --exclude test.js --watch"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interactive drop-down menus created on the fly

I am currently working on dynamically generating inputs using Angular and Angular Material. Each time the user clicks on the Add button, a new dropdown should be created. However, I am encountering an error message that says: 'Error: [$parse:syntax ...

javascriptangularjs

Converting a JavaScript dictionary into an array of documents: The ultimate guide

I have an object that looks like this: const obj = { "restaurant": 20, "hotel": 40, "travel": 60 } Is there a way to transform it into the format below? const newArray = [ { "category_name": "restaurant", "amount": 20 }, { "category_na ...

javascriptarraysjsonjavascript-objects

The hit detection algorithm seems to be malfunctioning, and the reason behind it is unclear. (Using Javascript/Processing

I am a beginner in game programming and programming in general. In the past, I have created a clone of "Flappy Bird" and some other games using the hit detection algorithm from the Mozilla Developer Network here. Currently, I am facing an issue while tryi ...

javascriptprocessing.js

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

javascriptcsswebdom

Find items where a certain value matches any of the values in another array and return them

I'm seeking assistance with a specific task. I have an object structured as shown below: SOMEKEY: { "key1": val1, "key2": val2 } Additionally, I have an array that contains string values like this: [stringA, stringB, stringC ...

javascriptnode.js

Absence of property persists despite the use of null coalescing and optional chaining

Having some trouble with a piece of code that utilizes optional chaining and null coalescing. Despite this, I am confused as to why it is still flagging an error about the property not existing. See image below for more details: The error message display ...

javascripttypescriptmaterial-ui

New development: In Express.js, the req.body appears to be empty and req.body.name is showing up as undefined

Something seems off with my code as I am unable to retrieve any data from either req.body or req.body.name. My goal is to extract text from an input field in a React component. Here's the excerpt of my POST request: //posting notes to backend and ...

javascriptnode.jsmongodbreactjsexpress

Use jQuery in MVC 5 to remove each cloned div individually starting from the last one, excluding the default div

My default setting is as shown below. https://i.stack.imgur.com/m8Hpr.png The add button functions correctly, but I am having trouble removing cloned divs. I can only remove the last one, instead of each cloned div individually starting from the last, exc ...

javascriptjqueryangularjsajaxasp.net-mvc-5

I would like to add a border at the bottom of each item in a ul list

My current focus is on making my website responsive with a breakpoint set at 576px I am aiming to achieve the design shown in this image without any space in the border-bottom and have both elements expand to full width: menu li hover However, I'm c ...

javascripthtmlcsshtml-lists

Encountering a challenge when trying to deploy an Angular NodeJs application using Google Cloud Build

Having difficulties deploying my application using GCP Cloud Build. Is it necessary to upgrade to GLIBC_2.28, and if so, how can I accomplish this on GCP Cloud Build? I suspect that the Node.js version might be the issue, even though I have specified node ...

node.jsangularlinuxnpmgoogle-cloud-platform

Mapbox is capable of managing several GEOJSON files by utilizing the loadURL function

I am in the process of creating a map that is designed to load multiple layers from various sources based on a configuration file called config.json. Each layer should trigger a popup when clicked, but oddly enough, I am only able to see the popup for the ...

javascriptjqueryleafletmapboxgeojson

make changes to the current selection in the drop-down menu

Imagine I have a select list with 3 options: <select> <option>1</option> <option>2</option> <option>3</option> </select> My goal is to create a textfield and button that will allow me to upd ...

javascripthtml

What is the best way to select a specific button to handle the onSubmit event in a React form with multiple buttons

Imagine having the following HTML structure: <div id="container"></div> <p>Output: <span id="output"></span></p> accompanied by this block of JS code: function otherAction(e) { document.getElementById('output& ...

javascriptreactjs

Ways to invoke a JavaScript function within a child window that is already open

I am working on a project where I have a main html file. In this file, I want the user to click on something that will trigger a new window or tab to open. This new window/tab should display the dynamically generated content of a hidden div in the main htm ...

javascripthtml

"Running experiments with Google Ads and Google Analytics scripts results in a blank page being displayed

Currently, I am working on a plain HTML file and conducting tests to ensure that the Google Ads and Analytics scripts are functioning correctly before implementing them on other pages. A colleague who has an AdSense account provided me with the script code ...

javascripthtmlgoogle-analyticsads

Tips on maintaining the color of the favorite / unfavorite button even after refreshing the page

I am currently developing a Laravel project that allows users to favorite and unfavorite books. When a user clicks on the favorite button, the color changes to red. If clicked again, the color reverts back to gray. The database successfully updates without ...

javascriptphpjqueryajaxlaravel

"Exploring the power of Vue3's composition API in managing the

Trying to implement an accordion component in Vue 3, but encountering a strange comparison issue. I'm attempting to execute a function within the accordionitem - specifically the toggle operation. However, despite numerous attempts, I am unable to mo ...

javascriptvue.jsvuejs3vue-composition-api

Check the schedule for any upcoming events

I am currently designing a website for a friend and I have a question regarding the functionality of the FullCalendar jQuery plugin. Is there a way to determine if there is an event scheduled for today using FullCalendar? If so, I would like to display t ...

javascriptjqueryfullcalendar

Encountered a problem while trying to connect to GCP using the cloud SQL proxy via Windows command prompt

I’m in the process of setting up a connection with Google Cloud using Cloud SQL proxy. Here’s the contents of my package.json: { "name": "folder-name", "version": "1.0.0", "descri ...

npmgoogle-cloud-platformcloud-sql-proxy

What do you understand by the term "cyclic data structures"?

According to the information found on the JSON site, it states: JSON does not allow for cyclic data structures, hence one must avoid passing cyclical structures to the JSON stringify function. I am curious about what this means. Could someone provide a ...

javascriptjsondata-structures