I am writing a JavaScript library that uses the new es6 promises. I can test the library in Firefox because promises are defined. However, when I try to test my code with Karma and PhantomJS, I get the error Can't find variable: Promise.. I am guessing this is because the PhantomJS browser doesn't support es6 promises yet.
How can I configure Karma to bring in the polyfill for promises?
You can pull in the Babel polyfill by simply installing Babel Polyfill:
npm install --save-dev babel-polyfill
and then include the polyfill file before your source and test files within the files section of your karma.conf.js:
files: [
'node_modules/babel-polyfill/dist/polyfill.js',
'index.js', //could be /src/**/*.js
'index.spec.js' //could be /test/**/*.spec.js
],
Unless you know that all your target browsers support Promises, you probably want to apply this polyfill to your released build too.
If you're feeling really adventurous you can use Browserify to pull files in to make your testing more modular, and then use Babelify to transpile ES6 to ES5. I've created a sample project with these and a working test involving a Promise (running on PhantomJS2) for reference.
For Babel 6, we need install babel-polyfill to support promise.
npm install --save-dev babel-polyfill
and add a line in karma.conf.js within the files section
files: [
'node_modules/babel-polyfill/dist/polyfill.js',
....
]
It's well documented in
https://github.com/babel/karma-babel-preprocessor#polyfill
as correctly pointed out by the author it is not able to recognize es6 promise. In order to load it, es6-promise module can be loaded with the help of webpack.ProvidePlugin and configuring it inside plugins array of webpack.
plugins: [
new webpack.ProvidePlugin({
'Promise': 'es6-promise'
})
]
This seems to work for me!
This thread should help you. According to it, it seems you should try to use PhantomJS2 with ES6.
You can also take a look to this project, which treat to the a near subject than yours.
I hope it may help you
You can use karma-babel-preprocessor for files that uses ES6 features. Install it with
npm install --save-dev karma-babel-preprocessor
and then add specify what files should be preprocessed you karma.conf:
preprocessors: {
"src/**/*.js": ["babel"],
"test/**/*.js": ["babel"]
},
Related
For me, Webpack is a bundler for "web" since browsers don't have good support for js module system. Thus using Webpack we could still use "module" way to develop and pack them for browsers.
Webpack has a config option target
module.exports = {
target: 'node'
};
using node webpack will compile for usage in a Node.js-like environment
But NodeJS already support CommonJS modules, why need Webpack to build something that runs in NodeJS environment?
Besides, if you want to compile your javascript, for example, using the ES module, you could just use babel to do so, using es module transform plugins or proper presets.
Why use Webpack, set the target to node and then use babel loader... instead of using babel directly?
I cannot think of the use case of using Webpack to bundle application running in node.
One reason I can think of when to use webpack for node is when you have a node_modules package where it's not compiled yet (Still in ES6).
babel-node won't be able to help you bundle the node_modules packages that need to be transpiled along with the rest of your code
I had to go through this process.. ): This scenario is helpful in Yarn Workspaces where you want your server to depend on another package in your workspace. Where your server will re-update whenever you make changes in the other package with the help of webpack
How to include a few node_modules package in babel-node
Having a single server.js output
instant deployable on a server
no worry about mismatching dependencies compared to your dev environment.
I'm using gruntjs (which uses uglifyjs) to build my Angularjs app. But uglifyjs still does not support es6, so in corresponding GitHub issue i found this. So now there is uglify-es, which seemingly supports es6. But I'm not sure how to integrate it with grunt. Now i have module "grunt-contrib-uglify", which has a dependency uglifyjs, which is now used. How can i make grunt use uglify-es instead?
I've achived this by installing the harmony branch of grunt-contrib-uglify, which supports es6:
npm install git://github.com/gruntjs/grunt-contrib-uglify.git#harmony --save-dev
The ECMAScript version has finally been released.
You can now get the same result with the official version (it's no longer needed to pick it from GitHub)
npm install grunt-contrib-uglify-es --save-dev
https://www.npmjs.com/package/grunt-contrib-uglify-es
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.
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 use requirejs and typescript for a node_module.
https://github.com/Ayolan/validator-extended/blob/master/app.js
It works but I cannot load it once installed from npm.
It looks like the requirejs config on the node_module change the config of my project (baseUrl and nodeRequire config actually).
There is a way to use TS and requirejs on a node_module?
Node.js does not use the AMD specification for JavaScript modules but instead the CommonJS modules. You'll need to tell the TypeScript compiler to compile your modules to this specification. This can be easily achieved by passing in the --module "commonjs"flag to the compiler.
Please note, that although the CommonJS spec uses the require keyword, this is something completely different than RequireJS. Node.js does not rely on RequireJS for it's module loading, it has its own module loader that is based on the CommonJS spec.
In short: try to avoid using RequireJS and node.js.
His question makes sense. Using requirejs in node has a number of advantages over the standard commonjs: http://requirejs.org/docs/node.html
How to build node modules with AMD / Requirejs:
http://requirejs.org/docs/node.html#nodeModules
If you don't need requirejs AND node at the same time
That was my case when I had 2 separated typescript builds, one for the front and one for the back but I had only one package.json to put all the "#types" in so tsc would pick both .d.ts in node_modules/#types
You can just manually tell tscto take certain types with the type option:
types: [ "requirejs" ] for the front and types: [ "node" ] for the back
Hope this helps.