phantomjs: How to use npm modules in phantomjs? - npm

Could you use npm modules by using require() in phantomJS? It seems to be able to load javascript files so maybe this is possible?

That is entirely depends on the nodejs module. It won't work if nodejs module requires some support via native function interface.(npm modules like http, socket.io, will not work on phantomjs, because it dependents on native interfaces)
Pure JavaScript nodejs modules should work on phantomjs too.

fyi, phantomjs has an aproximation of commonjs.
you can not use amd modules in phantomjs, and I do not know of any amd loader (like requirejs) that works in phantomjs
Update (2015): I have been using commonjs modules in PhantomJs 1.x and 2.x, they work well with one caveat: you can not use source-mapping (at the bottom of the file, looks like //# sourceMappingURL=index.js.map) as it will cause the PhantomJs module loader to fail. Otherwise, commonjs modules will load normally.

Related

How do I use hot-module-reload in projects generated by aurelia-cli?

I have a project generated with aurelia-cli with default options. It's built with au build, run with au run --env dev --watch and uses requirejs behind the scene. How do I add hot-module-reload into the mix?
There is no hot module reload support for Aurelia CLI at the moment. The team is working on a Webpack-based support, which should land soon, as stated in their latest update:
That's what our new hot module reload enables. We've got a preliminary version of this up and running and integrated into our forthcoming Webpack update. It enables editing Views, ViewModels, related components (such as ValueConverters and BindingBehaviors) and CSS without reloading the full website.
As you said, Aurelia CLI is currently using RequireJS for module loading. A support for Webpack is coming to Aurelia CLI sometime in future. When that happens, we should also get hot module reload support.
If you cannot wait, your options are to either switch to Webpack based solution or build your own support for it, which could be pretty hard to do.

TypeMismatchError on post

I'm writing an aurelia application with aurelia-fetch-client library.
When I try to post an object to my api service I get the error:
TypeMismatchError
In console only from Edge. Other browsers (Chrome, Firefox and IE11) have no problems. There are no description or any other details about it.
In all but the newest versions of Edge you need to include the fetch polyfill in order for aurelia-fetch-client to work. I think it's supported since version 14 but I wouldn't necessarily rely on it. Edge is known to be quirky with some of these things (the Promise implementation is also horribly slow, which is why I personally always use bluebird)
You can install it with npm i whatwg-fetch --save and make sure to import it + include it in your bundle config (the instructions for this depend on which build system you're using)

NPM to existing project?

I have an online site and Im going to overhaul it. While I cannot find any information about if I can use npm and some kind of package manager (e.g Webpack) on live site which is on shared host (which has latest Node.js, npm support etc), Im going to develope it locally and worry about "publishing" it later on.
Is there a way to somehow covert my current downloaded project to npm project or Im better off just starting a new project? This is rather confusing, I've never used npm before.
Im using WordPress, everything is run with PHP atm but Im going to overhaul it and use Node.js.
NPM can be used to collect and manage Javascript dependencies for the browser so as to create a stand alone front-end JS app. BUT, bower is probably a better choice.
NPM is designed to manage Javascript dependencies for projects that use NodeJS or use the CommonJS module format for requiring modules.
Bower is specifically a package manager (like npm or composer) but it is meant to manage browser based javascript dependencies.
Currently, javascript doesn't have a formally defined module/import system, so a number of competing require() functions are been produced. NodeJS comes with a require() function that searches the npm/ folder for modules. Browserify is a pre-processor that can scan the npm folder for a dependency and all of its dependencies and bundle them into 1 file for a browser to download (because browser's don't have a require() function because the JS standard doesn't have define one)
I might be rambling here, but you should probably look at bower, and then - at some point in the future - look at either browserify or requirejs to combine and optimize all the JS plugins for your front-end app.
Edit for clarity:
Basically there are 2 engines to run your JS application: the browser or NodeJS. NodeJS needs npm, the browser has no idea what npm is. If you want to write a clean, single page app, all JS front-end for a PHP backend, you don't need NodeJS, and therefore don't need npm. Using npm will prematurely complicate the development of a front-end browser app because it will force you to decide on a require() implementation (Browserify or Requirejs) right from the start.

Shared configuration for stylus and javascript

I am using gulp for the build system, bootstrap-styl as UX framework, and browserify as js bundler.
I need to store into a configuration file the different screen sizes used by media queries.
Stylus and the javascript application need to use these values.
Is there a plugin for building that ?
I have found for grunt-shared-config, is there an equivalent for gulp ?
You can use json bif for that.

How do I load AMD modules when using Angular JS?

For some strange reason Angular JS has its own module system that is neither AMD nor CommonJS.
I have many existing modules in AMD format. I would like to use them in an Angular app.
I would like to avoid rewriting any AMD modules. If possible, I would also like to avoid using Angular's own module system.
Is it possible to use AMD modules when using Angular? is it possible to avoid Angular's custom module system?
You do need to define Angular components in the "Angular way" (ex. angular.module('yourApp').directive('someDirective', ...)), but you can certainly use AMD both for wrapping Angular components and for pulling in non-Angular components to Angular. Check out this seed project.
You cannot replace Angular's module definitions with AMD defines. You have to wrap your Angular code in AMD defines for now.
Another thing to note is there is no real way to "lazy load" modules at the moment. You'll have to eventually require all the angular modules you're going to use in your application in your main angular module definition, so the benefits of using AMD is limited for now.
The dev team says they'll support lazy loading at some future point, which is the only reason to wrap your files in AMD now.