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

When I try to post using the raw feature in Postman in Node.js, the post ends up empty

My API is supposed to receive data for saving in the database. However, when I call the PUT method, my req.body.nome returns empty. It works fine with form-urlencoded, but I've tried using body-parser and it's deprecated. Here is my request usin ...

javascriptnode.jsexpress

ReactJS - What makes ReactJS unique compared to other technologies?

Hey there! I'm currently trying to figure out why this specific code snippet was successful while my previous one wasn't. I've included both snippets below: SUCCESSFUL CODE: handleInputChange = (e) => { let { value } = e.target; ...

javascriptreactjsreact-redux

A sleek Javascript gallery similar to fancybox

I'm currently working on creating my own custom image gallery, inspired by fancybox. To view the progress so far, please visit: I've encountered some issues with the fade effects of #gallery. Sometimes the background (#gallery) fades out before ...

javascriptjqueryfancybox

Error encountered with :jshint-junit-reporter

After creating a demo for jshint with Grunt, the code is as follows: module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('jshint-junit-reporter'); grunt.initConfig({ jsh ...

npmgruntjsjshint

Mastering the art of properly connecting Angular HttpPromise

Recently, I encountered an angular Service containing a crucial function: service.getItemByID = function(id) { var hp = $http({method: "GET", url: "service/open/item/id", headers: {"token": $rootScope.user.token}, para ...

javascriptangularjs

The installation of redis-commander on Debian Stretch was unsuccessful

Upon attempting to set up redis-commander, I encountered some errors when trying to run the command. The specific error messages are as follows: redis-commander { Error: ENOENT : no such file or directory, open '/root/.redis-commander' errno: ...

npmredisdebian

Every time I try to run my Angular app, it crashes. I've already tried reinstalling Node and rebooting

After attempting to relocate an angular project into a different folder yesterday, I encountered issues when trying to start the app using ng serve. Interestingly, creating a new project and running ng serve resulted in the same error. Both projects were ...

node.jsangularnpm

What's causing my variables to be returned as null in the alerts?

Why am I receiving null values when alerting my variables? I'm attempting to pass a string stored in a variable from an external JavaScript file back to the main page using alerts. Initially, I suspected that the JavaScript was not fetching data cor ...

javascriptphpjson

Ascending and descending functions compared to Ext.getCmp()

I'm feeling a bit lost trying to figure out which method to use when using grep object - should I go with up(), down(), or Ext.getCmp(ID)? Personally, I find it simpler to assign an ID to the object and then retrieve it using Ext.getCmp('ID&apos ...

javascriptextjsextjs4extjs4.1

Access a different tab through the utilization of JavaScript functions

Hi everyone, I recently created tabs using bootstrap, but I am facing a challenge with a specific scenario. I need the active tab to switch to another tab when a submit button is clicked. <div id="checkout-progress"> <ul class="nav nav-tabs"& ...

javascriptjquerytwitter-bootstrap

Is it advisable to perform unit testing on my JavaScript code?

I'm interested in exploring the potential value of using QUnit. However, I am completely new to testing, especially with JS, and don't know where to begin. I would appreciate any guidance on starting unit testing for an application that already ...

javascriptjqueryunit-testing

Disable the scroll animation feature for certain IDs

I implemented JavaScript code to animate scrolling for each block with a specific ID. However, when I added Bootstrap's tabs, the animation interfered with the functionality of the tabs. Is there a way to disable the scroll animation specifically for ...

javascriptjquerytwitter-bootstrapanimationscroll

I encountered an issue when trying to include the dotenv file, receiving the following error message: [TypeError: Network request failed]

babel.config.js File plugins: [ ["module:react-native-dotenv", { "envName": "APP_ENV", "moduleName": "@env", "path": ".env", "blocklist": null, "allowlist": null, "blacklist": null, // DEPRECATED "whitelist": ...

javascriptreactjsreact-native

What factors determine how a React component should be re-rendered based on a specific file?

I am facing a challenge with a file that stores an array of objects. There is a component responsible for fetching data from this file and rendering the list. The issue arises when the file gets updated externally, as I need the component to reflect these ...

javascriptreactjsreact-hooks

esBuild failing to generate typescript declaration files while running in watch mode

Recently dove into using edBuild and I have to say, it's been a breeze to get up and running - simple, fast, and easy. When I execute my esBuild build command WITHOUT WATCH, I can see that the type files (.d.ts) are successfully generated. However, ...

node.jstypescriptnpmtscesbuild

Webpack's development server along with JSXHint is indicating that the constant named `$__0` has already been declared

After running the command below, it appears that jsxhint is analyzing the compiled files by webpack: webpack-dev-server --devtool eval --colors --progress --content-base ./build The warnings I receive are as follows: const '$__0' has already ...

npmreactjswebpackwebpack-dev-server

how to change class on vue function result

I need a way to display the content stored in requestData as li elements. Each list item should have an onclick function that, when clicked (selected), adds a specific value from a reference to an array. If clicked again (unselected), it should remove the ...

javascripthtmlvue.jsvue-component

Error: Async API Call Triggering Invalid Hook Invocation

When working with my functional component, I encountered an issue while trying to implement a react hook like useMemo or useEffect. It seems that the error may be caused by the asynchronous nature of the API call. In the service file: export const getData ...

javascriptreactjsreact-nativereact-reduxreact-hooks

Tips for patiently waiting for a series of asynchronous calls to successfully complete

I have a scenario where I am dealing with multiple asynchronous calls that are dependent on each other's success. For example: function1 = () => { /*Some required Logic*/ return fetch("myurl") .then((json) => { functi ...

javascriptjqueryajaxasync-await

Sluggish performance of Zombie.js on VirtualBox shared directory

I am currently experimenting with using Zombie in my Node.js project. The project is running within a shared folder on a VirtualBox VM, and I've noticed a significant decrease in performance when Zombie is installed locally rather than globally. For ...

node.jsnpmvirtualboxvagrantzombie.js