Web Pack define plugin variables are recoginized by ts-loader about ts-loader HOT 14 CLOSED

I have the same issue. Thanks for recommendation above! declare is a good vay to pass data from the webpack config. But now I don't want to write declare anywhere when I use defined variables. What if I will declare defined variables one time in one place and will use their everywhere?

I have define plugin like this:

plugins: [
  new webpack.DefinePlugin({
    DIST_PATH: JSON.stringify(DIST_PATH),
    SRC_PATH: JSON.stringify(SRC_PATH),
    TMP_PATH: JSON.stringify(TMP_PATH),
  })
]

then I created constants.ts file:

declare const DIST_PATH: string;
declare const SRC_PATH: string;
declare const TMP_PATH: string;

const _DIST_PATH = DIST_PATH;
const _SRC_PATH = SRC_PATH;
const _TMP_PATH = TMP_PATH;

export {_DIST_PATH as DIST_PATH};
export {_SRC_PATH as SRC_PATH};
export {_TMP_PATH as TMP_PATH};

Now I got the opportunity import defined variables everywhere.

import {DIST_PATH, SRC_PATH, TMP_PATH} from "../constants";
console.log(DIST_PATH, SRC_PATH, TMP_PATH);

I hope this decision will be useful for someone. :)

from ts-loader.

TypeScript doesn't know about the variable and therefore gives an error. You need to tell TypeScript about it.

// some .d.ts file somewhere
declare var DEVMODE: boolean;

Also I don't think you can have a hyphen in a variable name.

from ts-loader.

One important note - actually to let webpack's dead code elimination to kick in, better option is to create declaration file and include it (or it's parent directory) into your tsconfig.json file, so:

You need to create constants.d.ts file:

declare const DIST_PATH: string;
declare const SRC_PATH: number;
declare const TMP_PATH: boolean;

Then add it's parent directory to tsconfig.json:

{
  "compilerOptions": {
    /* other options */
    "typeRoots" : [
      "./src/typings" // path to your typings directory (relative to tsconfig.json)
    ]
  }
}

Finally, you can use these global variables anywhere, without any import statements 😃

from ts-loader.

After some digging I found out that in [email protected] following code works as well (still looks a little bit ugly though, but at least it's 3 lines less 😐):

declare const DIST_PATH: string;
declare const SRC_PATH: number;
declare const TMP_PATH: boolean;

export { DIST_PATH as DIST_PATH };
export { SRC_PATH as SRC_PATH };
export { TMP_PATH as TMP_PATH };

Then you can import it as it was described previously:

import {DIST_PATH, SRC_PATH, TMP_PATH} from "../constants";
console.log(DIST_PATH, SRC_PATH, TMP_PATH);

Since this issue topic was my no. 1 occurence when googling I thought that I'll share that - for future wanderers ;)

from ts-loader.

It's not https://blog.johnnyreilly.com/2016/07/using-webpacks-defineplugin-with-typescript.html

from ts-loader.

@MaRuifeng If @types directory does work - it's a pretty good finding! But according to the docs it shouldn't - they explicitly say that only @types packages within node_modules directory should be included by default. Are you sure you don't have the .d.ts files included in some other way (maybe you include all of the files from src directory using include config property)?

About overriding of the default typeRoots behaviour - well, it's a matter of taste I would say. It's a config option, so it's meant to be changed. Also, lots of projects do override this default behaviour already because of different reasons (almost in any of my projects I have some "custom" typings directory which I needed to include). So as I said, it's not that huge of a deal for everyone. But if it fits your case best - good for you! 💪

from ts-loader.

Below setup worked for me.

1. Create a @types folder under src.
2. Create a file constants.d.ts in it with below content

declare const DIST_PATH: string;
declare const SRC_PATH: number;
declare const TMP_PATH: boolean;

These global variables can be safely used like a charm. I think this works because TypeScript by default includes all @types packages into compilation? https://www.typescriptlang.org/tsconfig#types

TypeScript includes @types packages within node_modules only by default. This worked in my case because all src files included by the "include": ["src/**/*"] config.

I am a bit skeptical on @FRSgit solution as it overrides the default typeRoots behaviour.

from ts-loader.

After some digging I found out that in [email protected] following code works as well (still looks a little bit ugly though, but at least it's 3 lines less 😐):

declare const DIST_PATH: string;
declare const SRC_PATH: number;
declare const TMP_PATH: boolean;

export { DIST_PATH as DIST_PATH };
export { SRC_PATH as SRC_PATH };
export { TMP_PATH as TMP_PATH };

Then you can import it as it was described previously:

import {DIST_PATH, SRC_PATH, TMP_PATH} from "../constants";
console.log(DIST_PATH, SRC_PATH, TMP_PATH);

Since this issue topic was my no. 1 occurence when googling I thought that I'll share that - for future wanderers ;)

@FRSgit selected your option and it worked.

from ts-loader.

@jbrantly I try this out

OOPS yep just an example it should be DEVMODE

from ts-loader.

See https://github.com/jbrantly/ts-loader/tree/master/test/conditionalRequire as well

from ts-loader.

Closing as there is no issue with ts-loader here.

from ts-loader.

You can have a hypen btw, it's only accessible like such : window["DEV-MODE"] though

from ts-loader.

same issue. don't know whether or not is the ts-loader problem.

from ts-loader.

@FRSgit, loks good )

from ts-loader.