I use Atom to write code. It uses tsconfig.json to include and exclude folders. In order to use intellisense I need node_modules to be included, but when I want to compile it to js I don't want node_modules to be compiled.
So I need to call tsc in the upper folder where the config.ts is, and this results in compiling the whole node_modules.
My folder structure looks like this:
node_modules
config.ts
spec
|--test1.ts
|--test2.ts
Any idea how to exclude node_modules when compiling with tsc command?
Use exclude property
{
"compilerOptions": {
...
}
"exclude": [
"node_modules"
]
}
Files included using "include" can be filtered using the "exclude" property. However, files included explicitly using the "files" property are always included regardless of "exclude". The "exclude" property defaults to excluding the node_modules, bower_components, jspm_packages and directories when not specified.
link updated:
https://www.typescriptlang.org/tsconfig#exclude
Related
src/
user.ts
department.ts
using above as a context structure, if i do tsc is it possible to ignore/prevent generaton of declaration files for department.ts within tsconfig or webpack while bulding the app?
Currently its generating declaration for all the files within src directory
Yes, you can use the exclude key in the tsconfig.json file.
{
// ...other config options
"exclude": ["src/user.ts", "src/department.ts"]
}
See the TypeScript documentation for more details
I can't find a way to generate d.ts and d.ts.map files using webpack. babel-loader only generates js and js.map files. I also need d.ts and d.ts.map files (which I was able to generate using tsc command) as shown in this picture:
Here is a minimal repo that contains all the settings: https://github.com/stavalfi/lerna-yarn-workspaces-example
More Details
I moved to Lerna + yarn. One of my packages is core (will be used in other packages) which is written in TS and JS.
I'm using webpack 4,babel-loader 8 for ts-to-js.
The other packages are trying to find type definitions and implementation of my core package but I was only able to generate index.js and index.js.map with webpack:
output: {
path: distPath,
filename: 'index.js',
},
{
"extends": "../tsconfig.settings.json",
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"declarationDir": "dist",
"rootDir": "src",
"outDir": "dist"
}
}
When I compile with tsc (without webpack), everything is working great as I showed in the picture above.
Does my strategy is wrong? what should I do?
I have tried a lot of plugins that generate d.ts files but they don't work and doesn't create d.ts.map files.
I already tried: typescript-declaration-webpack-plugin, npm-dts-webpack-plugin, dts-bundle-webpack, #ahrakio/witty-webpack-declaration-files. (They are listed in the package.json of core so you can clone and play with it).
Running ts-loader before babel-loader will do the trick.
Specifying that you want declaration files in config is all you need.
If you are using an absolute path, the output d.ts files will also contain absolute paths which are useless and will result in typescript compilation errors.
To fix that, I wrote a plugin to convert an absolute path to a relative path:
https://github.com/stavalfi/babel-plugin-module-resolver-loader
You can call the Typescript compiler tsc directly to do that.
Use tsc --declaration to output a .d.ts file and tsc --declarationMap to generate the corresponding map file.
You can find more documentation here:
https://www.typescriptlang.org/docs/handbook/compiler-options.html
I have a typescript project that uses paths for imports. For example:
"paths": {
"#example/*": ["./src/*"],
}
Thus the project can import files directly from using statement like:
import { foo } from "#example/boo/foo";
For publishing to NPM I have I'm compiling the typescript files and then copying the result to a dist folder. Thus all the *.d.ts and corresponding *.js files are in the dist folder. I also copy package.json to the dist folder.
I now test this by generation a new typescript project and then run npm i -S ../example/dist, in order to install the project and attempt to run some of the compiled typescript code.
However the relative imports no longer work. For example if boo.ts depends on foo.ts it will say that it can't resolve foo.ts.
When I look at the *.d.ts files they contain the same paths that were used the source code before it was compiled. Is it possible to turn these into relative paths?
Update
I looks as if generating relative paths for Node is something Typescript does not perform automatically. If you would like this feature, as I would, please provide feedback on this bug report.
As a brief follow-up to arhnee's suggestion, it seems that as of Aug 2020, Microsoft still refuses to implement custom transformers for whatever reason, so these modules remain relevant.
So to future readers, here's how you can actually compile TS path aliases to relative paths. ttypescript is merely a transformer framework that requires a "path transformer" in order to actually convert the TS path aliases. Thus you will need to install both ttypescript and typescript-transform-paths.
npm i --save ttypescript typescript-transform-paths
Then, it's easy as just specifying usage by adding the following property to the compilerOptions object in tsconfig.json:
"plugins": [
{ "transform": "typescript-transform-paths" }
]
And finally, run ttsc instead of tsc.
There is a project called ttypescript that you can use for this. If you use it with the module typescript-transform-paths I beleive it will acheive what you want.
I have a folder structure similar to this:
/root
.eslintrc.json
package.json
/someFolder
/sub
/sub
/anotherFolder
/src
/containers
/components
/oneMoreFolder
/sub
/sub
I'm working with create-react-app and am applying airbnb rules. I have been able to run the linter in a specific folder easily from the CLI but on compile, it targets ALL folders.
I want to run the linter on compile on just the files within the /src folder.
How can I go about this? I've tried a number of solutions.
Thank you!
TL:DR How do I target just one subfolder and all of its files on compile when using eslint and create-react-app?
inside your .eslintrc.json
{
"rules": {
"quotes": [ 2, "double" ]
},
"overrides": [
{
"files": [ "src/**/*.js" ],
"rules": {
"quotes": [ 2, "single" ]
}
}
]
}
in .eslintignore
/someFolder
/anotherFolder
/oneMoreFolder
I used ignorePatterns option. It'll tell ESLint to ignore specific files and directories. It's useful when your IDE (ex. VS Code) is reporting errors in unwanted files.
{
"ignorePatterns": ["gulpfile.js", "gulp/**/*", "webpack.config.js"]
}
You can Also use the .eslintignore file.
You need to do something like eslint src/**/*.js[x]. If you are running a webpack build(or precommit hook) that does linting check then add it within the scripts object inside package.json.
Where you have written the script to run lint in package.json, there only mention the folders you want to target
scripts:{"lint": "eslint src public"}
Then if you want to ignore some type of files in the respective folders, you can mention in ESLint config file.
I have a tsconfig.json which specifies an outDir. The reason is that I want to separate the generated JavaScript output from the TypeScript sources.
So:
"compilerOptions": {
...
"outDir": "target/",
...
}
This works very well, until I compile the project with the typescript compiler only. All generated javascript output is created in the target/ directory.
But, if I call it with the angular compiler (ngc, it is essentially a wrapper around the tsc typescript compiler), we have an additional build step. It compiles the template files and components into typescript, which will be compiled further to javascript by the tsc.
These intermediary typescript files have the *.ngfactory.ts or *.ngsummary.json extension.
Now my problem is, that the ngc command generates these files still in my src/ directory, totally ignoring my outDir setting in my tsconfig.json.
What is the cause of this problem? Does any useful workaround exist?
Extension: regarding comments, ng from the angular-cli can do this. This leads to a side-question, how does it do with the ngc?
The cause of the problem was that ngc has some additional options in tsconfig.json what I didn't add.
The following settings in tsconfig.json do what I want.
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}