I run babel against my source files, i want to output one single file, with all the relative imports injected inside the file.
Source structure
src
│ index.js
│ relative-file.js
│
└───some-folder
another-relative-file.js
the index file requires relative-file, and the relative-file requires another-relative-file.
Expected output
index.js with no relative requires, everything is injected inside this one file.
Actual output
index.js with require('./relative-file') inside.
Tried babel-cli commands
babel src --out-file distribution/index.js
output a dir will put output multiple files requiring each other just like the source.
babel src --out-dir distribution
I don't think babel helps with eliminating requires. You need to use a bundler like webpack in combination with babel to achieve what you want.
Related
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"
I have my tests grouped in folders, like this:
test/
├── unit/
├── integration/
└── acceptance/
In each of the above folders, there are a number of test files (e.g. test.js)
I execute my different test suites with the following commands:
mocha test/unit/**/*.js
mocha test/integration/**/*.js
mocha test/acceptance/**/*.js
I recently decided to add a subfolder to test/unit, to organise things a bit:
test/
└── unit/
├── subfolder/
│ └── new.test.js
├── foo.test.js
└── bar.test.js
But now mocha is only executing the tests in new.test.js.
I thought /**/*.js meant that it would recursively look in all folders for .js files, but that's not the behaviour I'm seeing. Is this a bug or a misunderstanding on my part?
By wrapping those exact same patterns in quotes, mocha will be resolving the patterns, rather than bash:
"scripts": {
"test:unit": "mocha \"test/unit/**/*.js\""
}
Luckily, mocha resolves the pattern as expected and will recursively find all .js files in test/unit, including any level of subfolders.
TL;DR There's no need to read any further, unless you are trying to do something similar with something other than mocha. The below is just how far I got with bash's file pattern matching:
Without the quotes, I wasn't able to make it work for more than two levels at the time:
mocha test/unit/**
The above matches all files in test/unit and the first level of subfolders, but this will match any file and not just .js
mocha test/unit/{,**/}*.js
Now we are matching only .js files, but still only in test/unit and the first level of subfolders.
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
I have a gulp script that watches for code changes in all javascript files. It looks like this:
gulp.watch(['./**/*.jsx', './**/*.js'], ['build:react']);
So, it watches for all .js and .jsx files from root directory, but I want to ignore node_modules directory.
How can I do that ?
You ca use gulp unwatch This removes the folder specified from your pipe. However, it's generally a good idea to have a source folder that gulp watches instead of the project root folder (then the .git directory and all sorts will be caught up in your task.
I've been attempting to implement a build solution using NPM scripts as opposed to Gulp/Grunt/etc as outlined here: http://substack.net/task_automation_with_npm_run and here: http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/. However, I'm struggling to integrate a clean and sensible approach for managing numerous Jade files in the build process.
The Jade CLI supports passing it a directory and outputting all of the deeply nested compiled Jade files. This is great, however, this completely flattens the folder structure. I'd ideally like to have Jade output the results whilst maintaining the directory structure. What's the best way to go about this?
Example folder structure:
package.json
src/
foo.jade
bar/
baz.jade
qux.jade
Running jade src -o build outputs:
package.json
build/
foo.html
baz.hmtl
qux.html
src/
Instead of:
package.json
build/
foo.html
bar/
baz.html
qux.html
src/
Not sure how I missed this but for anyone who should happen upon this in the future, the -H flag is your friend.
ex: jade src -H -o build
ref: https://github.com/jadejs/jade-cli/blob/master/index.js#L36