Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

Question

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

My directory structure is as follows:

- project
|- build
|- src
 |- index.ts
 |- file.txt

The typescript code is compiled to the build directory and executed from there. I am seeking a dependable method to access file.txt from the compiled module without having to adjust for the build output location.

One possible solution could be assuming that the file can be found at ../src/file.txt relative to the index.js in the build directory. However, if the build output changes, this assumption would need to be updated accordingly.

Is there a way to set the root directory as an environment variable before compiling the typescript?

javascript node.js typescript path

Answer 1

Answer №1

For those utilizing webpack, consider adding a resolve option as outlined in the documentation here: https://webpack.js.org/configuration/resolve/

Here's an example:

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

If you are using vscode, you can also utilize jsconfig.json and configure compilerOptions as described in the documentation: https://code.visualstudio.com/docs/languages/jsconfig

Here's a sample configuration:

{
  ...
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["src/assets/*"],
      "@background/*": ["src/background/*"],
      "@frontend/*": ["src/frontend/*"],
      "@mixins/*": ["src/frontend/mixins/*"]
    }
  }
}

Answer 2

For those utilizing webpack, consider adding a resolve option as outlined in the documentation here: https://webpack.js.org/configuration/resolve/

Here's an example:

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

If you are using vscode, you can also utilize jsconfig.json and configure compilerOptions as described in the documentation: https://code.visualstudio.com/docs/languages/jsconfig

Here's a sample configuration:

{
  ...
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["src/assets/*"],
      "@background/*": ["src/background/*"],
      "@frontend/*": ["src/frontend/*"],
      "@mixins/*": ["src/frontend/mixins/*"]
    }
  }
}

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

Answer №1

Similar questions

Concealing the submit button until a file has been selected

How to utilize a parameter value as the name of an array in Jquery

Does TypeGraphQl have the capability to automatically format SQL queries?

Effortlessly switch between CSS animation styles while adjusting animation settings

Avoid re-rendering the page in Nuxt when adjusting dynamic parameters

What could be causing the double invocation of render() in ReactNative?

The jQuery animation concludes before its anticipated completion

What is the specific process that Express.js uses to manage errors?

Is there a way to set up IIS to host my NodeJS REST API on a unique URL without having to expose any additional ports?

Is there a way to make all cards in material ui the same height?

Executing concurrent HTTP requests in groups in Node.js via async handling

I keep encountering an issue with getJson

What is the best way to modify or revise meta fields for individual products in order to retrieve multiple images for each product in Shopify?

Issue: Unable to import certain modules when using the Typescript starter in ScreepsTroubleshooting: encountering

How do I leverage one of my props in React to iterate through my JSON data?

You are only able to click the button once per day

Steps for creating a node.js and ejs file to deploy on 000webhost

There is an issue with creating the React app using the Node npm create-react-app command. The file named "react-app"

Activate an asynchronous request within a dropdown menu that was loaded using ajax

Typescript disregarding conditional statements