Babel output paths to maintain directory structure of input paths

Question

Given the following example directory structure:

srcDir/file1.js
srcDir/subDir1/file2.js
srcDir/subDir2/file3.js

I want to process those files with babel-cli so that the output files end up in destDir with the same relative directory structure.

That is:

destDir/file1.js
destDir/subDir1/file2.js
destDir/subDir2/file3.js

I don't want to process all files in srcDir, just some of them.

I'd imagine I have to specify an input directory, a list of file paths and an output directory.
But Babel's command line help doesn't explain how to do it.

Usage: babel [options] <files ...>

Options:
  -f, --filename [filename]                   filename to use when reading from stdin - this will be used in source-maps, errors etc
  --presets [list]                            comma-separated list of preset names
  --plugins [list]                            comma-separated list of plugin names
  --config-file [path]                        Path to a .babelrc file to use
  --env-name [name]                           The name of the 'env' to use when loading configs and plugins. Defaults to the value of BABEL_ENV, or else NODE_ENV, or else 'development'.
  --root-mode [mode]                          The project-root resolution mode. One of 'root' (the default), 'upward', or 'upward-optional'.
  --source-type [script|module]
  --no-babelrc                                Whether or not to look up .babelrc and .babelignore files
  --ignore [list]                             list of glob paths to **not** compile
  --only [list]                               list of glob paths to **only** compile
  --no-highlight-code                         enable/disable ANSI syntax highlighting of code frames (on by default)
  --no-comments                               write comments to generated output (true by default)
  --retain-lines                              retain line numbers - will result in really ugly code
  --compact [true|false|auto]                 do not include superfluous whitespace characters and line terminators
  --minified                                  save as much bytes when printing [true|false]
  --auxiliary-comment-before [string]         print a comment before any injected non-user code
  --auxiliary-comment-after [string]          print a comment after any injected non-user code
  -s, --source-maps [true|false|inline|both]
  --source-map-target [string]                set `file` on returned source map
  --source-file-name [string]                 set `sources[0]` on returned source map
  --source-root [filename]                    the root from which all sources are relative
  --module-root [filename]                    optional prefix for the AMD module formatter that will be prepend to the filename on module definitions
  -M, --module-ids                            insert an explicit id for modules
  --module-id [string]                        specify a custom name for module ids
  -x, --extensions [extensions]               List of extensions to compile when a directory has been input [.es6,.js,.es,.jsx,.mjs]
  --keep-file-extension                       Preserve the file extensions of the input files
  -w, --watch                                 Recompile files on changes
  --skip-initial-build                        Do not compile files before watching
  -o, --out-file [out]                        Compile all input files into a single file
  -d, --out-dir [out]                         Compile an input directory of modules into an output directory
  --relative                                  Compile into an output directory relative to input directory or file. Requires --out-dir [out]
  -D, --copy-files                            When compiling a directory copy over non-compilable files
  --include-dotfiles                          Include dotfiles when compiling and copying non-compilable files
  --verbose                                   Log everything
  --delete-dir-on-start                       Delete the out directory before compilation
  -V, --version                               output the version number
  -h, --help                                  output usage information

Diphthongize

I want to do this too. I wonder if you have to use gulp or similar :( – Sophistication

Answer 1

So what I found, is, if you do babel * -d ./build/ then it will flatten all first level directories.

So I had

-- server/
 |  apis/
 |    mainApi.js
 |  store/
 |    models/
 |      User.js
 |  index.js

from the ./server directory I ran babel * -d ./build/, so I got:

-- server/
 |  build/
 |    models/
 |      User.js
 |    index.js
 |    mainApi.js
 |  apis/
 |    mainApi.js
 |  store/
 |    models/
 |      User.js
 |  index.js

the output is flattened, however there was still a models folder with User.js in, which led me to believe that first level dirs will be flattened.

So I put everything into a server/src/ folder and from ./server/ run babel src/ -d ./build/ and now it retained my directory structure.

-- server/
 |  build/
 |    apis/
 |      mainApi.js
 |    store/
 |      models/
 |        User.js
 |    index.js
 |
 |  src/
 |    apis/
 |      mainApi.js
 |    store/
 |      models/
 |        User.js
 |    index.js

Kaffraria

Answer 2

Babel has a special flag:

--relative  Compile into an output directory relative to input directory or file. Requires --out-dir [out]

If you want to mimic input files' paths you can try to use a command with this flag.

Hypnoanalysis