Babel doesn't find all of my .js/.es6 files in my directory.
I have this directory structure:
src/
assets/
sample/
models.es6
scripts/
playground.es6
If I run babel src --out-dir dist --source-maps --copy-files --presets env, it only transpiles /src/assets/sample/models.es6 and doesnt go through src/scripts/playground.es6.
What am I doing wrong?
Looking forward to your response!
You can do like below :
babel src/** --out-dir lib
more at official doc
Compile Directories
Compile the entire src directory and output it to the lib directory. You may use --out-dir or -d. This doesn’t overwrite any other files or directories in lib.
if you still stuck, you can use gulp or grunt or webpack to load/transpile mupltiple directives from different locations.
Hope it helps
I found the problem. It has barely to do with Babel.
Inside the src/assets/** is my Realm database sample.realm (https://realm.io). The file itself doesnt cause the problem. But if you open the sample.realm file with Realm Studio on MacOSX, a file called sample.realm.note gets created. This file causes babel to not exit the transpile task.
Related
Starting with an empty directory, is it possible to do that? Should I use stage-0 like it is on the Babel REPL?
I hope to transpile it just like how ReactJS does it. For some reason, I always got an error for just a file containing:
let obj = { a: 1 };
let newObj = {
...obj,
ha: 3
};
Other times, I can transpile a file, but if I transpile a folder, it'd say:
foo.js: Cannot read property 'contexts' of null
The commands I tried included:
npx babel src --out-dir compiled --presets=es2015,react,minify --watch
but the errors I mentioned above appeared. Also, when I do
npm install babel-minify
it reported
found 2489 vulnerabilities (849 low, 306 moderate, 1329 high, 5 critical)
There is also a notice
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
long run to explicitly add which proposals to use.
and I wonder what should be done.
Is it possible to
just continuously minify a folder
transpile some ES6 or ES7, 8 syntax that are not yet commonly supported
transpile JSX as well
?
I have found some reliable ways to make it work, although I am not sure when I should use babel.config.json and when to use .babelrc.json or .babelrc. It seems I have to run babel as ./node_modules/.bin/babel and is it true if I don't npm install babel using the -g option.
Here is what works:
create a folder, such as TryBabel
cd TryBabel
Go to https://babeljs.io/setup.html and click "CLI"
You need a package.json, so use npm init and just press Enter a few times
It should lead you to install
a. npm install --save-dev #babel/core #babel/cli
b. now look at your package.json. Remove the script about test but use this: "build": "babel src -d lib"
Now npm run build or ./node_modules/.bin/babel src -d lib should work, but make sure you have some .js files in the src folder. The transpiled result will be in the lib folder.
Now to transpile things into "pre ES6", just follow the #babel/preset-env instructions:
a. npm install #babel/preset-env --save-dev
b. make your babel.config.json to contain { "presets": ["#babel/preset-env"] }
Now you can use npm run build to transpile once, or use ./node_modules/.bin/babel src -d lib --watch to keep on running it and "watch" the src folder and transpile files in it when the files change.
To do minification or make it work with JSX/React, see
https://babeljs.io/docs/en/babel-preset-minify
and
https://babeljs.io/docs/en/babel-preset-react
and make sure your babel.config.json file looks like:
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry"
}
],
["#babel/preset-react"],
["minify"]
]
}
and remove minify if you don't want the code to be minified.
I wrote a VSCode extension and am trying to publish it locally via vsce package. When I install my app through the VSIX file, there's no 'node_modules' folder inside my extension which leads to my extension not loading correctly because no modules are found
I have checked that my required dependencies are indeed inside dependencies and not peerDependencies or devDependencies. I should note that I have a .vscodeingore file containing the following:
.vscode/**
.vscode-test/**
out/test/**
src/**
.gitignore
vsc-extension-quickstart.md
**/tsconfig.json
**/tslint.json
**/*.map
**/*.ts
node_modules
webpack.config.js
I would like that my node_modules be installed and I would see a "node_modules" folder inside my './vscode/extensions/' folder.
Thanks!
Using latest babel preset. My .babelrc contains
{
"presets": ["env"]
}
In my package.json, I run it as follows:
"build:babel": "babel app.js app/** venue/** -d build",
My original code structure is:
But after running babel my build folder looks like the following:
The problem I'm seeing is that it's building the file in the sub-directories correctly but it also putting it into the root build folder. Example: "containers" is in the build folder under app/plugins/containers which is correct. But its also in the root build folder. Also, the files "border, button, card, checkbox, click, color_picker, ..." belong in other sub-directories (which it is), but is also in the root build folder.
I'm wondering if I'm running it incorrectly?
I was recently trying to debug errors in a next.js getting started project and realized that it didn't like a .babelrc file in a parent directory.
My questions are:
Why is the project throwing an error on a .babelrc configuration file in a parent directory that's not part of the project? Does it recursively look for a babel configuration file in all parent directories or did I at some point configure babel to look at that config file? How can I check what that configuration is?
Is this a quirk of next.js that makes it look for a configuration file in a parent directory?
I forgot if I had added that .babelrc configuration in the parent directory - is that something that I needed? What is the configuration? How should I update it to make the error go away?
ERROR in ./pages/index.js
Module build failed: ReferenceError: [BABEL] /Users/me/Projects/foo/foo-web/pages/index.js:
Using removed Babel 5 option: /Users/me/Projects/.babelrc.optional
- Put the specific transforms you want in the `plugins` option
.babelrc
"optional": ["es7.classProperties"]
babel is looking first .babelrc file is present in the root directory
you have to create the .babelrc file
npm install babel-plugin-transform-runtime
insert to .babelrc
{
"plugins": [
"transform-runtime"
]
}
more info
I've scouered the documentation for Babel and cannot seem to find an answer, so I turn to the glorious community.
With a directory structure like this:
src/
folder1/
file1.js
file2.js
folder2/
file3.js
folder3/
file4.js
file5.js
I want Babel to transpile all files into a flattened directory:
lib/
file1.js
file2.js
file3.js
file4.js
file5.js
No matter what I try, Babel always inherits the src/ directory structure. Any ideas?
If you are using babel-cli, you can do this:
babel folder1 folder2 folder3 folder4 -d lib
which works fine if you have a limited number of folders. It'll output them all flattened.
To expand on samanime's answer, if you're using babel-cli, you can simply use a wildcard on your parent folder...
babel src/** -d lib