We Keep Coding

Babel-CLI set config value correctly

I am trying to add a build command that uses babel CLI to transpile my ES6. I am having difficult pointing it correctly to babelrc.
The file structure is roughly as follows:
root
src
index.js
...
.babelrc
.package.json
In my package.json, I originally tried the following:
"scripts": {
"build": "babel --out-dir dist src",
...
},
But this gave an error because of the array destructuring notation I have used in my code. I think this is because it is not picking up my .babelrc file. Using
babel --presets=#babel/preset-env --out-dir dist src
instead fixes this problem. But I would rather I didn't have to specify plugins etc. here and rely on the .babelrc file instead.
From reading this issue, I get the impression babel looks for a config file in src rather than root . Looking at the documentation it seems there is an option for specifying a config file, but I can't quite get it to work correctly. My attempt:
babel --config-file .babelrc --out-dir dist src

You can use ./node_modules/.bin/babel in place of babel.
Worked for me this week.
Check point 3 in the overview from babel-cli
https://babeljs.io/docs/en/usage
And running this command to compile all your code from the src directory to lib:
./node_modules/.bin/babel src --out-dir lib
You can use the npm package runner that comes with npm#5.2.0 to shorten that command by replacing ./node_modules/.bin/babel with npx babel

For Babel version 7.x, it looks for project-wide configuration in the file with name like this - babel.config.{json|js|cjs|mjs}. Check the documentation here.

In my end,
npx babel src/ -d lib/

Babel should already pick up the .babelrc file automatically. If you want to add that preset, you should specify
{
// ... more .babelrc up here
"presets": ["#babel/preset-env"]
// ... more .babelrc down here
}
in your .babelrc file.
But babel will automatically search for the closest .babelrc file in the directory starting at the entry file and working its way upwards (specified here at the bottom).

Typescript: Make tsconfig emit one folder but not the other folder

I'm converting an existing project from js to typescript. I want to be able to set noEmit = true on one folder but have the other folder have noEmit = false.
The reason is that I have my client(angular) code set up through webpack and do not need typescript to generate the javascript for me. While the server (Node/express) still needs to be generated into javascript.
I've tried a few different combinations but haven't seem to find the right way to do it.
My only solution that I've been able to get to work is having two tsconfig.json and running a command like tsc -p src\server\tsconfig && tsc -p src\client\tsconfig
I realize that this is not a good solution, but I have not gotten a single tsconfig to work nor having a base tsconfig.
Here is the folder structure..
|-Src
|--/client
|--/server
Is there a way to achieve this using a single tsc command? Or is there a better way I should be formatting the project? Thanks!!

I don't think there's another solution besides having multiple tsconfig.json files like you're already doing, as per this answer and this comment.
You can make this a little more streamlined by having a tsconfig.json for compilation and a separate tsconfig-build.json that you use in your package.json for building, i.e.:
// package.json
{
"scripts": {
"build": "tsc -p tsconfig-build.json"
},
// ...
}
With this setup (assuming the default tsconfig.json is in your root), running tsc from the command line will use the default tsconfig.json, but running npm run build will use tsconfig-build.json. You can also have one tsconfig extend from another, so if you have a lot of options in common, you could add a tsconfig-base.json that both configs extend from.

You can probably achieve what you want with the exclude property in your tsconfig.json file.
Check the documentation
for the exclude property

How to tell angular cli to stop using minified version of a vendor js file?

I have a build that includes the following scripts in my angular.json file:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/lodash/index.js",
"node_modules/backbone/backbone.js",
"node_modules/jointjs/dist/joint.js"
]
As you can see there, I'm including node_modules/jointjs/dist/joint.js, which is the non-minified version of the jointjs library.
However, when I run ng serve it continues to bundle the joint.min.js file, which resides in the same directory as join.js.
I would like to use the non-minified version while in dev, to help me track issues with params I'm passing to the library.
How can this be accomplished?
Thanks!

To achieve this you can redirect to the correct file in the tsconfig.json file like this.
"paths": {
"jointjs": [
"node_modules/jointjs/dist/joint.js"
]
}
Also I don't think you really need to have anything at all in scripts. What you put here gets included in another output file scripts.js which is separate from vendor.js and is meant if you want to include some scripts like the includes in a webpage. In this case all the related libraries get included by joint.js automatically and go into vendor.js so there is no need to include them again. Here is the documentation about global scripts in angular-cli.
Another option is that you edit the package.json file in the jointjs npm module (npm_modules/jointjs/package.json) directly and change the entry "main": "./dist/joint.min.js", to "main": "./dist/joint.js",. This is a bit of a hack since you are changing the npm package.

Babelify the files in place, in multiple directories

How can I use babel to transpile the JavaScript files containing ES6 stuff, in different directories? I want the result to be in the same directories (e.g. having foo/bar/index.js, I want to get the ES5 code in the same file, by overriding it).
To override one directory I use:
babel lib/ -d lib
This works for one folder (overrides all the content in the lib directory).
How can I do the same for two or more directories? For example, how can I do that for lib/ and bin/?

AFAIK the babel CLI isn't complex enough to support this use-case in a single command. However you could concatenate two commands to achieve the same result:
babel lib/ -d lib && babel bin/ -d bin
Or you could write a script that does this for you, using gulp or another build tool of your choice. For example (untested):
gulp.task('default', () =>
gulp.src(['bin/**/*.js', 'lib/**/*.js'], { base: './' })
.pipe(babel())
.pipe(gulp.dest('.'))
)

The codemod CLI is perfect for this.
It will just modify your files in place:
codemod --plugin babel-transformer.js src/**/*.js

How do I include a .gitignore file as part of my npm module?

I am building an npm module that will generate a specific project template for certain software projects. As such, when a developer installs my npm module and runs it, I would like the program to create files and folders in a certain way.
One such file I would like to include in the project template is a .gitignore file because the software project is going to assume it will be tracked via git. However, when I call "npm install" on my module, npm renames all my .gitignore files to .npmignore files. How can I ensure that my .gitignore files are not tampered with by npm when I distribute my module?

Currently npm doesn't allow .gitignore files to be included as part of an npm package and will instead rename it to .npmignore.
A common workaround is to rename the .gitignore to gitignore before publishing. Then as part of an init script, rename the gitignore file to .gitignore. This approach is used in Create React App
Here's how to do it in Node, code from Create React App init script
const gitignoreExists = fs.existsSync(path.join(appPath, '.gitignore'));
if (gitignoreExists) {
// Append if there's already a `.gitignore` file there
const data = fs.readFileSync(path.join(appPath, 'gitignore'));
fs.appendFileSync(path.join(appPath, '.gitignore'), data);
fs.unlinkSync(path.join(appPath, 'gitignore'));
} else {
// Rename gitignore after the fact to prevent npm from renaming it to .npmignore
// See: https://github.com/npm/npm/issues/1862
fs.moveSync(
path.join(appPath, 'gitignore'),
path.join(appPath, '.gitignore'),
[]
);
}

https://github.com/npm/npm/issues/1862
Looks like this is a known issue. The answer at the bottom seems like the recommended approach. In case the issue or link ever gets destroyed:
For us, I think a better solution is going to be clear documentation that if authors wish to use .gitignore in their generators, they will need to name their files .##gitignore##, which will be a value gitignore set to the same string gitignore.
In this way, the file that gets published as a template file to npm is called .##gitignore## and won't get caught by npm, but then later it gets replaced with the string to be .gitignore.

You can see multiple commits dealing with npm issue 1862:
this project adds a rename.json:
lib/init-template/rename.json
{
".npmignore": ".gitignore",
}
this one renames the .gitignore:
templates/default/.gitignore → templates/default/{%=gitignore%}
index.js
## -114,6 +114,10 ## generator._pkgData = function (pkg) {
+ // npm will rename .gitignore to .npmignore:
+ // [ref](https://github.com/npm/npm/issues/1862)
+ pkg.gitignore = '.gitignore';

Edit: even though this answer causes .gitignore to be included in the published package (proven by unpkg), upon running npm install the .gitignore file is simply removed! So even getting NPM to include the file is not enough.
Another solution (simpler imo):
Include both .gitignore and .npmignore in the repo. Add the following to your .npmignore file:
!.gitignore
!.npmignore
Now that .npmignore will already exist in the published package, NPM won't rename .gitignore.