How can babel transpile async await functionality to ES2015 or ES6
if yes, please let me know the commands / options to pass to babel / .babelrc file to set ?
http://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=es2015
But i was looking for something which would transpile to ES15 not js 5. which means "let a =100;" should not transformed to "var a =100;" but features after ES15 will be transpiled to ES15; like async.
Related
I am using Parcel version 2 to build my JavaScript app, and one of the modules in node_modules is CommonJS but uses "let" and "const" keywords, so I need to transpile it so it is compatible with IE 11, which we are still supporting for a few more months.
By default parceljs does not transpile code in node_modules, somehow expecting that package developers will know which browsers their users are targeting and provide ready-to-use code. I have read that parcel 2 is honors babel configuration files, and I have created one, but that alone does not tell it to transpile the code from node_modules. I do not need to transpile all the node_modules code, but apparently just the one module. Here is my .babelrc.json, which it seems to be looking at because I get some warnings about the use of parcel-env which I build:
{
"presets": [
["#babel/preset-env", {
"targets": "IE 11, last 2 versions"
}]
]
}
What other configuration am I missing to get to transpile either all of node_modules or a particular module?
Note: Other posts I have found around this topic were for version 1 of Parcel, and there were hints that there would be better options in version 2.
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'm trying to have source files (and their dependencies in node_modules) be transpiled when running AVA tests. I've configured AVA to require babel-register and inherit my .babelrc file with the following in package.json:
"ava": {
"require": "babel-register",
"babel": "inherit"
}
and this in .babelrc:
{
"presets": [ "es2015" ],
"ignore": false
}
I have a test spec that imports a source file with and that source file imports an ES2015 dependency from node_modules:
However, when running ava I see:
/Users/me/code/esri-rollup-example/node_modules/capitalize-word/index.js:2
export default input => input.replace(regexp, match => match.charAt(0).toUpperCase() + match.substr(1));
^^^^^^
SyntaxError: Unexpected token export
Which tells me that the source file (src/app/utils.js) did transpile, but it's dependency in node_modules (capitalize-string/index) did not.
Both the source modules and dependencies transpile fine when I use babel CLI, so it really seems like the .babelrc's "ignore": false setting is not getting passed to babel-register. I can see from the babel docs that you can explicitly pass an ignore option to babel-register, but I don't see how you can do that from the AVA config. I even tried adding the following to my test file before the line where it imports the source files, but I still see the same error:
require("babel-register")({
ignore: false
});
I suppose I could add a transpile step before testing, but I wanted to make sure that I wasn't just missing some AVA or babel configuration first.
This is related to issue in babel itself – https://phabricator.babeljs.io/T6726
But you can put babel-register require in separate file (let call it .setup.js):
require('babel-register')({
ignore: /node_modules\/(?!capitalize\-word)/i
});
const noop = function () {};
require.extensions['.css'] = noop; // If you want to ignore some CSS imports
And then change "require": "babel-register" to "require": "./.setup.js"
I'm having trouble finding the correct way to use babel to allow me to use jsx in serverside.
Node-jsx was deprecated for babel. It seems like babel-core/register is whats supposed to be used but I still get unexpected token issues.
I created a repo with the problem im having.
https://github.com/pk1m/Stackoverflow-helpme
When I run node app or npm run watch-js I keep getting unexpected token referring to the JSX code '<'.
How do I get babel to transpile JSX, or am I completely off, thanks.
You need to use babel-register (npm i babel-register --save). And run on your server:
require('babel-register')({
stage: 0
});
You can omit stage 0 if you aren't using experimental babel features. Also you might prefer to put those options in .babelrc instead.
Note that it will only work for files required AFTER calling that (so it would not have an effect on the file you include it in).
You could also have the presets and other options in a .babelrc file.
For babel 6x:
npm i babel-register babel-preset-es2015 babel-preset-react --save
require('babel-register')({
presets: ['es2015', 'react']
});
Note: there are also stage 0-2 presets.
For watching as you've written in your package.json you could try a CLI command like the one facebook are suggesting in the note here (or use webpack):
babel --presets react es2015 --watch app/ --out-dir build/
Does anything special have to be done to get Electron to run my main.coffee file? I have a main.js file (that works) that I converted to CoffeeScript (hence main.coffee), but when I run Electron main.coffee I get an error like the following:
App threw an error when running [SyntaxError: /Users/foo/develop/electron/main.coffee:13
app.on('window-all-closed', ->
^
Unexpected token >]
I can only assume this is a CoffeeScript issue, since when I commented the offending code with CoffeeScript's block comment (###), I got the following:
App threw an error when running [SyntaxError: /Users/foo/develop/electron/main.coffee:13
###
^
Unexpected token ILLEGAL]
I added coffee-script to my packages.json as a dependency, and made sure it was installed to my local node_modules directory like my other application dependencies, but that didn't seem to help.
I think, the main file main.js has to be javascript. But you can require a coffee file, for example application.coffee, from there using coffee-script.
main.js
// main.js
require('coffee-script').register();
require('./application')
application.coffee
# application.coffee
app = require('app')
BrowserWindow = require('browser-window')
# ...
Installing coffee-script
Include it in your package.json:
{
...
"devDependencies": {
"electron-prebuilt": "^0.33.1",
"coffee-script": "~1.10.0"
}
}
And run:
npm install
I've recently discovered that instead of transpiling to Javascript, you can do something like:
<script>
require('coffee-script').register();
require('../src/app/boot');
and then in src/app/boot.coffee you can use regular CoffeeScript :)
I found it in the app https://github.com/postcasio/hearthdash so there are more examples there.
There is no way to do it (atom doesn't ship with a coffeescript compiler), but you can use the watch option of coffeescript,
-w, --watch watch scripts for changes and rerun commands
For example:
coffee -w main.coffee in your case.