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
Related
I am trying to build a plugin for Adobe XD. I'd like to use some npm packages along with some Node.js APIs inside my code. Would this be possible?
Javascript support page says you may be able use some npm packages (some might require webpack). However, Node.js apis are not supported.
Can I use npm packages or Node.js APIs?
You may be able to use some npm packages without modification, but
chances are good that you’ll need to use webpack or rollup in order to
generate a bundle.
Node.js APIs themselves are not supported.
You can use some npm packages in your Adobe XD plugin, but you need to bear in mind the following constraints:
XD's require function does not follow node-style resolution. That is, require('module') won't automatically resolve to node_modules/module/index.js. To address this, you'll want to use a bundler, such as webpack. For an example using webpack and React, see the ui-hello-react sample.
The XD JavaScript environment does not supply a lot of node APIs that many node modules may rely on. For example, npm packages that use Node's fs module will not work inside of Adobe XD plugins. Purely algorithmic npm packages should work, however, as long as they only rely on the JavaScript specification itself.
Furthermore, the HTML5 DOM API environment supplied by Adobe XD may not be sufficient if your npm package relies upon specific browser APIs. For example, the Web Audio API isn't available to Adobe XD plugins, and so any npm packages that require the use of that module wouldn't work.
For some packages, it may be sufficient to add stubs or polyfills. For example, you could stub requestAnimationFrame if a module required it, like so:
global.requestAnimationFrame = cb => cb();
Now this isn't a functional rAF, but it might be sufficient for the package you're using.
I have a cucumber js 4.2.1 and I want to use babel before running the tests.
I couldn't find any documentation/tutorial about this integration.
Does anyone know how to do that?
Bonus: Using the latest babel versions (7.0.0 (not beta)).
To be more specific, currently, when running cucumberjs from the command line, I don't specify the feature files folder and the steps folder:./node_modules/.bin/cucumber-js.cmd.
In case you are using protractor with cucumber you can use babel-register:
See an example here: https://github.com/canvaspixels/cucumber-protractor/blob/master/sample-conf.js
Just add:
require('babel-register'); to the top of your conf and install the babel-core npm package.
I highly recommend using cuketractor to structure your project and reduce boilerplate: https://www.youtube.com/watch?v=5vuYL4nxMXs
So can anyone help me get the AngularJS intellisense working in Visual Studio Code?
Is it possible to configure this globally or can it only per project? I'm preferably looking for a solution on how to do this globally, as in whenever I open VSCode AngularJS intellisense just works.
I'm currently using AngularJS 1.5.x. I do not know if it possible to configure according to the version of AngularJS being used. Additionally, I'm using VSCode 1.10.2 and VSCode - Insiders on Windows 10.
I've already searched in several places, but the solutions I've found did not work for me. Maybe it's because they are old.
There are many extensions available for intellisense in Angular (2+), but not for AngularJS. However, this article by Mike Barlow explains how to do it and it's fairly recent since you've asked your question (June 2016).
Here's the summary of what you need to do per the article:
Have the following tools installed: node.js 6.2+, npm 3.9+, and VSCode 1.2+.
Install the typings package globally: npm install -g typings. Make sure this is a 1.X version.
Install AngularJS types: typings install dt~angular --save --global
This should create a a folder typings\globals\angular\ with a file called "typings.json"
Create a file within this directory as a sibling to "typings.json" called "jsconfig.json". This file can remain empty unless you need to transpile code (ie, using typescript, coffeescript, etc.)
Restart VSCode
Ive seen other questions regarding this issue - Is there a way to turn on ES6/ES7 syntax support in vscode? - but this has now been addressed by Microsoft and implemented in VSCode.
However, I have downloaded the latest version of VSCode, and cloned the example es6 repo from GitHub, and it seems to not be working
To turn ES6/ES7 support, the best way is to use ESLint with dedicated parser ( babel, etc...). I try it if you're interested: VSCode Linter ES6 ES7 Babel linter.
If you're using eslint with npm, you may need the .eslintrc file in the root folder of your project. See my answer to this question and the docs for the ESLint VSCode extension.
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