Generating Typescript sourcemaps with Babel through the command line

I'm struggling to figure out how to generate sourcemaps with Babel when using the command line. The Babel documentation seems to focus more on integrating with gulp, and it's not clear how to apply that knowledge to the command line.

Currently, I am compiling my TypeScript code like this:

tsc -p ./src

Here is a snippet from my tsconfig.json file:

{
    "compilerOptions": {
        "module": "amd",
        "noImplicitAny": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "out": "wwwroot/app.js",
        "sourceMap": true,
        "target": "ES6"
    },
    "files": [
        "App.ts"
    ]
}

This configuration generates both wwwroot/app.js and wwwroot/app.js.map files.

Afterwards, I run Babel over app.js using the following command:

babel ./wwwroot/app.js -o ./wwwroot/app.js --presets es2015 --compact false --inputSourceMap ./wwwroot/app.js.map --sourceMaps both

While this updates app.js, it leaves app.js.map untouched, causing them to no longer synchronize correctly.

Can anyone provide guidance on how to make the Babel step create a new sourcemap that accurately maps my final app.js back to the original TypeScript source?

Answer №1

This is how I got it to function properly. To begin, make sure the following options are included in your tsconfig.json file:

{
  "compilerOptions": {
    "inlineSourceMap": true,
    "inlineSources": true
  }
}

When running babel-cli, you'll need to add --source-maps inline. Below is a sample npm script that assumes tsc outputs to a directory named build and that babel will also output to the same folder:

tsc && babel build -d build --source-maps inline

Answer №2

On my quest for the same information, I stumbled upon this helpful resource:

In essence, while advanced options can work with babel --name=value, specifying a filename for inputSourceMap is not feasible via the CLI and is only accessible when utilizing the code itself.

Gulp sourcemaps with TypeScript and Babel could potentially provide valuable insights. I have managed to generate sourcemaps that point to both the JS and original TS files, showing promise. Nonetheless, like mentioned in the comments of that answer, I'm struggling to configure it to use the correct sourceRoot, resulting in .js.map files pointing to non-existent source locations.

A bit unsatisfying overall. :-(

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

Stop ajax loading animation for a specific scenario

I usually have a global ajax load animation that runs during every ajax call. However, there are certain cases where I need to disable this effect. How can I achieve that? This is the code for the global animation : $(document).ajaxStart(function(){ $ ...

Using THREE.js to animate between two specific points on a spherical object

Seeking a solution on how to rotate a sphere in order to align one specific point with another on the surface, like illustrated in the image below. An illustration of the desired movement While I've come across tutorials explaining this process i ...

Is there a way to dynamically adjust the height and width of a div based on the movement of the mouse pointer?

Here is how my div looks: https://i.sstatic.net/2A4vL.png I came across some discussions on stack overflow but couldn't quite grasp how to implement it in my project. Imagine if I move the mouse pointer between column1 and column2, I want an arrow to ...

Is there a way to modify the color of a div element on one webpage from a different webpage?

As I continue to learn about utilizing the localStorage and cookie techniques, I am currently experimenting with changing the color of a div element on page1.html from page2.html upon clicking a submit button. The goal is for this color change to be perman ...

Tips for syncing the state data stored in local storage across all tabs with Ngxs state management

After converting the state data to base64 format using the Ngxs state management library, I am saving it. While I can retrieve all data across different tabs, any changes made in one tab do not automatically sync with other tabs. A tab refresh is required ...

How can one verify a particular attribute or determine if an element is stale in Puppeteer?

Greetings! I recently started transitioning from Selenium with Node.js to Puppeteer for UI testing. I have a couple of questions regarding how to check if an element has become stale (removed from the DOM) and the best way to monitor changes in specific at ...

Display each column within a single row on an HTML page without extending into the next row

My HTML page layout is structured as follows: https://i.sstatic.net/elwVs.png The issue at hand is that I want the MSAN and Users columns to be in the same row, or else, for a large number of records, it won't be feasible. Here's my HTML file. ...

Error Encountered When Trying to Import BrowserAnimationsModule in Angular 5: Unexpected Token "<"

As I try to integrate the BrowserAnimationModule into my Angular 5 project, a rather foolish error keeps popping up. Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at eval (<anonymous>) at Object.eval ...

Replicated shadows brought to life in three.js

I've been experimenting with shadows in three.js and have encountered a problem where the shadow is being cast on two faces of a mesh, as shown here. It's puzzling that the shadow from the "head" of my character is appearing on two faces of the ...

Navigating to specific location on page following addition of dynamic elements

My website utilizes ajax for dynamically adding content, and I am attempting to make the page automatically scroll to the newly added content. However, despite my efforts, I am unable to get it to function properly. Below is the link I am currently using ...

Integrate Geometric Information into PostGIS

Hi there! I'm currently using a combination of postgresql and node.js for my backend operations. I've been trying to insert a point into the database from the frontend, but unfortunately, I keep encountering an error message stating "value too lo ...

Tips for accurately defining prop types in next.js when utilizing typescript?

Here is the content of my index.tsx file: import type { NextPage } from "next"; type AppProps = { articles: { userId: number; id: number; title: string; body: string; }; }; con ...

Is the reCAPTCHA display malfunctioning?

I've recently activated the reCAPTCHA feature on my osclass.org website. However, I am encountering an issue where the image is not displaying in the captcha. After inspecting the code with firebug, I have not been able to identify any errors. If an ...

Trouble with updating mongoDB records within a forEach loop

I currently have a Node backend server that is linked to a MongoDB database. Within this database, there is a collection called patients containing patient objects. My goal is to update the position attribute for each object. To begin, I am retrieving the ...

Unable to run JavaScript file fetched from cache API

For a web application built using pure vanilla JavaScript without utilizing service workers, I am looking to cache a JavaScript file hosted on an AWS S3 file server explicitly. The script below will be embedded in the index.html file of the application (UR ...

Developing a notification system using a combination of ajax, jquery, and Iframe

I am in the process of setting up a messaging system on my website. Currently, I have a table with three columns - two integer fields (from and to) and a timestamp for the date of sending. On one section of the page, I want to display a list of messages ...

Is there a way to eliminate unnecessary chunks from MUI in NextJS?

https://i.sstatic.net/zAkV0.png I recently created a single page and noticed that there is a significant amount of unused JavaScript in my codebase. Specifically, I am using MUI and React icons. Any suggestions on how to efficiently manage this issue? T ...

Could the script tag be causing the text to vanish from the HTML file?

Recently, I was experimenting with HTML to make it select a new random image file every time the page reloads. Surprisingly, I managed to achieve that, but now I'm facing an issue where none of the text appears as intended and only the image is visibl ...

How come my dimensions are not returning correctly when I use offset().top and scrollTop() inside a scrolling element?

Currently in the process of developing a web app at , I am looking to implement a feature that will fade elements in and out as they enter and leave the visible part of a scrolling parent element. Taking inspiration from myfunkyside's response on this ...

Issue with Datatables not loading on page reload within an Angular 7 application

Incorporating jQuery.dataTables into my Angular 7 project was a success. I installed all the necessary node modules, configured them accordingly, and added the required files to the angular.json file. Everything functioned perfectly after the initial launc ...