Develop Reference

Babel CLI have outdir be relative to transpile dir

First of all thanks for trying to help me. I'll get straight into it.
I'm trying to transpile Typescript files to JS files. These typescript files are scattered throughout a directory (all modules follow the same file structure)
The package.json command is:
"build:js": "babel app/code/VendorName/**/view/adminhtml/web/ts --out-dir js --extensions \".ts,.tsx\" --source-maps inline"
All of the typescript files reside in different folders within VendorName (notice the **). Within it through the typescript files are in view/adminhtml/web/ts, always.
I would like to transpile all of these files and put them in their respective modules' js folders which are in:
app/code/VendorName/**/view/adminhtml/web/js. Meaning literally next to the ts folder. How can I make it, so that the --out-dir is relative to the directory that I'm transpiling? Is that even possible? Otherwise I'll have to setup a config for each and every single module I'm developing, which would be a bit of a nuisance.

The correct answer is adding the --relative flag. Position is very important "babel --verbose app/code/VenderName/**/view/adminhtml/web/ts --ignore \"**/*.d.ts\" --relative --out-dir ../js --extensions \".ts\" --source-maps inline"

Webpack watch file changes and trigger loader for other files

I'm looking for a way to watch changes on files (sass files precisely) and execute a loader on other files (js files) with webpack.
The goal is to detect sass changes and recompiling all the javascript files with the babel-loader, because they might import it through the styled-jsx plugin.
I'm stuck in the "loader" concept and can't figure out how to get other files when testing for /.scss$/

You don't need to do anything by yourself if you using scss modules with webpack (more about module concept in the webpack docs.
What webpack does - it starts at entry point (you can specify one or multiple entrypoints, if you don't, default src/index.js would be used). And then builds dependency trees between modules (which can have any file extension as long as there's a specific loader that can turn file into module). Webpack then watches all files and rebuild all modules that have a dependency on changed file. So, if you import the .scss file in, let's say, your entrypoint
import './styles.scss';
// ...
It would rebuild automatically when styles.scss changes

You need to import your .scss file(s) under one of your .js files so that webpack actually picks up the changes.
Then, all loaders you have configured will be applied automatically based on which file type they should target.

How do I include a JS file from a node_module in my view in Roots?

I'm using roots (http://roots.cx) and I want to include a library from a node_module in my page. I've npm install foo and the library is on disk.
I've tried adding foo to the extensions in app.coffee and restarted the watcher but the path it's rendering is to the node_modules folder which does not resolve from the browser.
extensions: [
js_pipeline(files: 'node_modules/foo/lib/foo.js', 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.styl')
]
and in the page source I get
<script src='node_modules/foo/lib/foo.js'></script>
What is the correct way to include a library from a node module?

Try this instead with the ./ since it's only a file and not a module, like this:
extensions: [
js_pipeline(files: './node_modules/foo/lib/foo.js', 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.styl')
]
Otherwise try to extract or copy the file from the node_modules and put it in a separate folder

Specify Compile Order in Babel

I have my React components broken up into separate JS files for manageability and using the following command to compile the files in my src folder into a single JavaScript file:
babel -w src -o scripts.js
My problem is the order in which the files are compiling. I want to make certain that the base file containing my render() function is last and that a file containing 'use strict;' is first.
Is there a way to tell Babel the order of files to process?
Thanks!
-Eric

Javascript project structure for dev and production using npm and grunt

I am trying to structure javascript files in a project. I have used NPM to manage the modules and planning to use Grunt to concatenate and compress the js and css files for deployment.
I am currently using the following structure
-[project root]
-- [node modules] :packages such as requirejs, jquery, semantic-ui etc using npm
--[war]
---[Dev]
----[css] multiple css files from modules (Question 2:?)
----[js] multiple js files from modeuls (Question 2:?)
- Gruntfile.js :for concatenate and compress
---[Production] -
----[css]:This is where the compressed and concatenated css files are kept
----[js] :This is where the compressed and concatenated js files are kept
Question 1: Is the above approach to structure the project correct ? Any other recommendations which allows to manage the packages, dev and production files.
Question 2: Can NPM or another tool allows me to pick up the js and css files from the [node modules] folder and place them to (dev>>css or dev>>js) folder ? If am doing this manually how do I track the versions ? Seems like I am missing something here, there must be a better solution.
Suggestions/recommendations/comments are much appreciated.
Thanks

The question is a bit too wide for SO format, but in general your structure is good. Instead of copying files from node_modules, you have your own JavaScript files under js and you import/require them to your own files.
//foo.js
//ES6 style imports
import {Foo as Bar} from "biz";
//Common JS style requires
var Bar = require("biz");
//AMD style requires
require(["biz"], function (Bar) {
If you want to use your node_modules in a browser, you'll want to bundle them using Browserify, Webpack, Rollup or similar. To automate this, you can easily use Grunt tasks such as grunt-browserify together with grunt-watch.
Same applies for your CSS files: You store your own files under css and if you need CSS files from node_modules you can import them to your own files: if you are using some preprocessor (such as SASS or LESS), the preprocessors usually inline your imports when building the .css-file. If you are just using plain .css files, see grunt-css-import for example.