Is there a way to provide the path to the .babelrc file to babel-cli?
Something like:
babel src --out-dir lib --config random-folder/sub-folder/.babelrc
You can put the .babelrc file in a shared parent directory of the other 5 modules as the lookup behavior of babel regarding the .babelrc is:
Babel will look for a .babelrc in the current directory of the file
being transpiled. If one does not exist, it will travel up the
directory tree until it finds either a .babelrc, or a package.json
with a "babel": {} hash within.
Considering the version you are using you may try extends or babelrc
http://henryzoo.com/babel.github.io/docs/usage/options/
Related
Is it possible to have a tsconfig such that I can create both commonjs and umd output such that I end up getting
src/
files.ts
lib/
umd.js
dist/
files.js
No, Typescript doesn't support simultaneous compiler modules. You can however create multiple tsconfig.json files:
tsconfig.json (for development, etc.)
umd.tsc.json
commonjs.tsc.json (it can be named anything as long as it's a valid json tsconfig.)
Configure those as you need and then call them to achieve the same effect. You can add a build script, whatever you like.
package.json
{
...
"scripts": {
...
"build:both": "tsc -p path/to/umd.tsc.json && tsc -p path/to/commonjs.tsc.json"
}
}
Docs
Github Issue
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.
Copying and pasting the same config file to every project I create is annoying.
Yes, from the documentation:
Babel will look for a .babelrc in the current directory of the file
being transpiled. If one does not exist, it will travel up the
directory tree until it finds either a .babelrc, or a package.json
with a "babel": {} hash within.
So put it in a higher-level directory, like your home folder.
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
I've been looking around for some .babelrc option to remove comments from the transpiled code, but I haven't had any luck. I tried this:
{
"comments": false
}
as well as
{
"options": {
"comments": false
}
}
and neither works. I'm out of ideas, and I was unable to find any decent documentation anywhere.
Using .babelrc is always recommended:
{
comments: false
}
If using babel-cli, you can use the --no-comments options to achieve the same behaviour.
The latest version of babel-cli includes tests that check for this behaviour to be implemented correctly.
EDIT
It does look like a problem with babel CLI ignoring the comments in .babelrc , a workaround is to use the --no-comments option.
In your package.json
"build": "babel ./index.js --out-dir ./dist/index.js --no-comments"
To know all the options of babel-cli
./node_modules/.bin/babel -h
ORIGINAL
Where are you running babel from? Gulp?
Check that you have the .babelrc file in the same or a parent directory of the files beign transpiled
From babeljs.io:
Babel will look for a .babelrc in the current directory of the file
being transpiled. If one does not exist, it will travel up the
directory tree until it finds either a .babelrc, or a package.json
with a "babel": {} hash within.
I have a project with this structure:
dist
index.js
.babelrc
index.js
gulpfile.js
node_modules
...
The relevant task in gulpfile.js
gulp.task('babel', () => {
return gulp.src('index.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('./dist/'));
});
Contents of .babelrc
{
"comments": false
}
The comments are being succesfully removed.
Also check if you're not setting the comments option to true in your gulpfile, for example.