I have a project built in WebStorm 2016.2.2, Node.js 6.6.0 and TypeScript 1.8.
For some reasons, which are specified here: ES6 import and export are not supported in Node.js, I need to use Babel.
I have installed Babel and babel-preset-es2015 and I have added a file watcher, but I'm still getting an "unexpected token import" error. It looks like babel doesn't work.
1) Do I need to take an additional action in order to transpile my js files to ES5?
2) What version of ES should I set the "JavaScript language version" to in WebStorm settings?
3) Is Babel supposed to generate another file with the output as TypeScript compiler does?
Any help will be profoundly appreciated!
here are the Babel file watcher settings that work for me:
Arguments: $FilePathRelativeToProjectRoot$ --out-dir $ProjectFileDir$/dist --source-maps --presets es2015
Working directory: $ProjectFileDir$
Output Paths to Refresh: $ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js.map
it compiles files to separate directory, preserving original file names, so that require() work; also, WebStorm is aware of generated files, as file system is correctly refreshed once the compilation completes
1) Create a file called .babelrc in the root directory of the project, with the following content:
{
"presets": ["es2015"]
}
It is not enough to install the es6 preset, you have to tell babel to use that preset. For reference: https://babeljs.io/docs/plugins/preset-es2015/
2) Try setting ECMAScript6
Do not use babel-preset-es2015 for Node.js 6. This will transform your sources to ES5, whilst you already have 97% support for ES6 natively, causing severe performance penalties. Merely adding it doesn't enable module transformation either.
Use the babel-preset-node6 preset or just add the transform-es2015-modules-commonjs plugin.
Related
I have ES6 gulp modules for automation in my project. Within them there are JS features you would expect such as imports. In order for this to work I have babel and ES2015 preset installed. My .babelrc file looks like this:
{
"presets": ["es2015"]
}
Everything works perfectly. Now I want to try upgrading to ES2017 which I believe was released recently so I assume has a completed spec (am I wrong about this?).
I install babel-preset-es2017 and change the .babelrc to:
{
"presets": ["es2017"]
}
Now nothing works and I get a basic error on using import:
SyntaxError: Unexpected token import
So clearly something has gone wrong here and it's not happy compiling gulp on the fly with a newer babel preset. Any ideas why?
I just want to use the newest JS version that is fully released with a finished spec and is actively maintained.
Background:
I have some tests that are written in ES2015, but will need to be transpiled to ES5 to run in PhantomJS due to the lack of ES2015 support in QtWebKit in v2.1. The 2.5 beta should support it.
babel-cli:
I can transpile a test to ES5 using babel-cli:
babel main.test.js --out-file main.test.es5.js
In order to transpile a directory of scripts, I can use:
babel tests --out-dir compiled-tests
This will output the transpiled test scripts to the compiled-tests directory. If I use the same directory, it will overwrite the original, so we don't want that.
Question:
Is there a way to modify the file name or extension in the directory mode of babel-cli without having to loop through the files and using babel.transformFileSync?
For example, I was expecting to do something along the lines of:
babel tests --out-dir tests --outputExtension=".es5.js"
This would take a.js, b.js etc and output a.es5.js, b.es5.js, etc.
I could also imagine the option of using regular expressions to extract part(s) of the source file name and combine that with something custom.
Since v7.8.0 you can use babel-cli's --out-file-extension flag:
babel tests --out-dir tests --out-file-extension .es5.js
https://babeljs.io/docs/en/babel-cli#set-file-extensions
There are build tools like grunt-babel, which allow you to modify the extension:
files: [{
expand: true,
cwd: 'test/',
src: ['*.test.js'],
dest: 'test/',
ext: '.test.es5.js'
}]
This is a solution. However, I didn't want to rely on using grunt for a small project.
I could create a node script that does what the grunt plugin does, which would be simple, but I think the babel-cli package should naively support this. I will look into the possibility of adding to it.
In the meantime, I have a workaround. I renamed my test files to use the.es6 extension, and then I force babel-cli to look only at that particular extension. The output will be .js for the ES5 code.
babel test --extensions=".es6" --out-dir test
It doesn't allow me to rename the script name or even provide a different extension, but it helps me distinguish between the two versions in the same directory.
According to Angular2 docs, TypeScript is at final downgraded to ES5.
my question is when I run the app (npm run server, or npm start) how can have access to ES6-with-decorators or ES5 translated files of Angular2 app.
the current app I have now is created by webpack-angular2-starter.
I need the ES6 or ES5 files for complexity analysis, cause I am using Plato that I think is the best in this work.
webpack-dev-server is serving all of our files from memory.
though in the webpack.dev.js the output is defined as path: helpers.root('dist'), where helper by default has the path to root of the project but you can not see any folder called dist.
the easiest way is to install webpack globally and just command webpack or in this case npm run build:prod then the dist folder is getting generated in the root of the project
I need the ES6 files...
They don't exist separately from the TypeScript files unless you create them. The TypeScript compiler can be told what kind of output to generate (ES3, ES5, ES6/ES2015, etc.) via the --target option, e.g., --target ES2015 (or its synonym --target ES6).
So if you need ES6 files for complexity analysis, you can use the TypeScript compiler to read the TypeScript files and output ES6 files.
I'm currently learning how to set up React-projects with npm, Babel and Browserify.
The usage of Babel seems sufficient clear to me: It translates JSX- and ES6-code to ES5-code, which can be run in all browsers.
The same with Browserify: It bundles the npm-packages which I use (React-DOM, React etc.) together with my own code into one large file. These file can then be used for to be deployed to production.
But I struggle to understand what Babelify is for.
I have read that it "allows to use Babel with Browserify". A sitepoint-article says that it is "Babel transformer for Browserify".
All these explanations are a bit weird to me because if:
Babel is a transpiler which transpiles JSX, ES6, TypeScript, ... -code to browser-compatible code.
Why do I need an additional "transformer" for the output of Babel?
babelify it's browserify transform package.
You can not use plain babel package with browserify. Therefore you should use babelify package, which contains babel inside to be able transform es6 code to es5 using browserify.
I would like to use Javascript generators on client code (and other ES6 features), but AFAIK it's not yet implemented in all major browsers yet or enabled by default. So I found traceur.
But I'm having trouble with Meteor integration. Traceur provides a command line compiler, which I could call as meteor-typescript (even if it's not recommended), because I couldn't find documentation about compiling a string from Javascript with traceur.
Then, I guess a runtime dependency is also required and has to be served to the client. Can I use bower for that?
Thanks in advance for any suggestions or pointers.
Edit: I could call the compiler (see my meteor-traceur), but I don't know how to add the runtime dependency. Traceur defines a RUNTIME_PATH, but I can't use it with api.add_files because the npm module isn't imported inside package.js (where Packages.on_use should be defined).
The npm depencies are installed in the .npm directoy in the package. You can add the traceur runtime by adding this to package.js:
Package.on_use(function (api) {
api.add_files(".npm/plugin/compileTraceur/node_modules/traceur/bin/traceur-runtime.js");
});
I forked your repository and fixed this: https://github.com/Sanjo/meteor-traceur
I also created a demo app: https://github.com/Sanjo/meteor-traceur-demo