How to use npm packages in laravel - node.js

I am trying to use a npm package in my laravel5 app, but I am not aware with node and require, can someone please help me to understand that how can I use the npm packages.
I am trying to use the following package:
https://www.npmjs.com/package/node-movie
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-main="{!! url() !!}/vendor/lib/require.js" src="{!! url() !!}/vendor/lib/require.js"></script>
<script type="text/javascript">
var imdb = require('imdb-api');
var movie;
imdb.getReq({ name: 'The Toxic Avenger' }, function(err, things) {
movie = things;
});
console.log(movie);
</script>
I am getting the following error in console:
Uncaught Error: Module name "imdb-api" has not been loaded yet for context: _. Use require([])

First thing:
You're trying to use node on the clientside; this means you don't know what node is.
To get started with it:
How do I get started with Node.js
Second:
You should understand what asynchronous means in javascript and node and how to work with it. Your console.log(movie) will log undefined every time even if your code works.
You can search for articles pertaining to async in node; here's an example article: https://www.codementor.io/nodejs/tutorial/manage-async-nodejs-callback-example-code
Third:
To use node with laravel (after you learn how to use node) you can start up a node server that works as a REST API to provide your laravel app with what you require from node packages (you 'request' the information from the node server).
Easier alternative:
Find a pure javascript implementation for that npm package (i.e. search for a solution that doesn't involve node).

Related

Browserify / Electron / AngularJS Error: fs.existsSync is not a function

I'm getting a Error: fs.existsSync is not a function code after I bundle my code using Browserify.
Before I've tried to use require() but I kept getting Error: require is not defined due to require function not supported on client side. Browserify seems a solution to use. I've managed to solve require error with browserify but another one came up - fs.existsSync is not a function.
Here is the error code as shown on my console:
Error: fs.existsSync is not a function
[159]</</sqlite.prototype.connect#http://127.0.0.1:8080/services/bundle.js:169566:35
[160]</<#http://127.0.0.1:8080/services/bundle.js:169992:29
invoke#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4718:19
enforcedReturnValue#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4557:37
invoke#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4718:19
createInjector/protoInstanceInjector<#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4517:37
getService#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4664:39
injectionArgs#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4688:58
instantiate#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4730:18
$controller#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:10369:28
compile/<#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:4081:28
bind/<#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:1247:18
invokeLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:9934:9
nodeLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:9335:11
compositeLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:8620:13
publicLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:8500:30
lazyCompilation#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:8844:25
updateView#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:4021:23
compile/</<#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:3959:11
$broadcast#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:18005:28
transitionTo/$state.transition<#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:3352:22
processQueue#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:16383:28
scheduleProcessQueue/<#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:16399:27
$eval#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:17682:28
$digest#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:17495:31
$apply#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:17790:24
done#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:11831:47
completeRequest#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:12033:7
requestLoaded#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:11966:9
<div ui-view="" class="ng-scope">
I'm using electron, angularjs and sqlite to build my app but I'm stuck on this error, any help will be appreciated.
I've managed to solve my error without browserify by enabling nodeIntegration: true in main.js file (electron entry file). Then I was able to load my script (coolscript.js) which has require function inside of it to my html without problems -
<script>
require('coolscript.js')
</script>

using systemjs on node.js (& Angular 2)

Say I have a foo.ts and app.ts as follows:
foo.ts:
export interface Foo {
id: number;
label: string;
};
app.ts:
import {Foo} from './foo'
var myfoo: Foo = { "id": 1, "label": "One" };
console.log(JSON.stringify(myfoo));
After compiling, executing 'node app.js' from the command line runs as expected if I use "module"="commonjs" in my tsconfig.json. Cutting to the chase, what I would like to do is is use my Foo interface client-side with Angular 2, and server-side with node. Inconveniently, the Angular 2 quickstart I am modeling on here wants "module"="system" in tsconfig.json. This configuration causes an error when trying to run 'node app.js':
System.register([], function(exports_1) {
^
ReferenceError: System is not defined`
I have tried following the instructions for using systemjs with node on github, but at this point I am just mashing keys and could use some help. How do I either (a) get my app.ts code running on the server-side using systemjs, or alternately, (b) get the Angular 2 quickstart running with commonjs?
I am going to wrap this up with an answer, even if the question hasn't been up-voted. The solution appears to be to use Gulp to compile the common typescript code (like interface Foo) differently for the client ("module"="system") and the server ("module"="commonjs"). If there is a way to compile the typescript code in the OP with "module"="system" I'd still like to know. But it appears to be kind of academic since everyone manages their project with Gulp or something similar anyway.

Not able to require a node module

I'm new to node js and require js. I installed a node module via npm install(https://www.npmjs.org/package/box-view). The node_modules folder has a box-view/index.js containing:
module.exports = {
BoxView: BoxView,
createClient: function (key) {
return new BoxView(key);
}
};
When I try to access the module using require:
require ['box-view'], () ->
console.log("Ready")
I get:
GET http://127.0.0.1:9000/js/box-view.js 404 (Not Found).
Looks like I'm doing a basic mistake. Thanks in advance!
Node has a simple module loading system - files and modules are in one to one correspondence.
var boxView = require('box-view');
console.log("Ready");
I think problem is because you did a npm install box-view so it will be under node_modules/box_view/index.js.
But using require you are just saying require ['box-view'] so it's looking ./box-view.js
This will work
require(["node_modules/box-view/index"]
but this is not a good practice.
You should have a look on require node manual. It tells how to use requirejs with node.

How to use Gulp to create a separate vendor bundle with Browserify from Bower components

I'm using Gulp and Browserify to package my Javascript into 2 separate bundles: application.js and vendor.js.
How do I bundle the vendor package if my vendor libraries are installed with Bower?
In my gulpfile, I'm using the following modules:
var gulp = require("gulp");
var browserify = require("browserify");
var debowerify = require("debowerify");
var source = require("vinyl-source-stream");
Assuming that I have only the Phaser framework installed with bower (for this example), my Gulp task to create the application package looks like this:
gulp.task("scripts-app", function () {
browserify("./app/javascripts/index.js")
.external("phaser")
.pipe(source("application.js"))
.pipe(gulp.dest("./tmp/assets"));
});
Meanwhile, the vendor task looks like this:
gulp.task("scripts-vendor", function () {
browserify()
.transform(debowerify)
.require("phaser")
.pipe(source("vendor.js"))
.pipe(gulp.dest("./tmp/assets"));
});
When I run this Gulp task, I get an error that states Error: Cannot find module 'phaser' from and then all the directories it search through (none of which are the bower_components directory).
Any ideas about how to package these up successfully are greatly appreciated. Thanks!
Answered my own question:
When using require in the Gulp task, you need to supply a path to a file, not just a name.
gulp.task("scripts-vendor", function () {
browserify()
.transform(debowerify)
.require("./bower_components/phaser/phaser.js")
.pipe(source("vendor.js"))
.pipe(gulp.dest("./tmp/assets"));
});
Notice that require("phaser") became require("./bower_components/phaser/phaser.js").
Doing this works, although the bundle takes forever to build (around 20 seconds). You're probably better of just loading giant libraries/frameworks directly into your app through a <script> tag and then using Browserify Shim.
This let's you require() (in the NodeJS/Browserify sense) global variables (documentation).
Seems like you figured out how to require the bower file. Hopefully you'll only have to bundle it once initially, and not every build. Including the library via a script tag isn't a bad idea. Another technique I'm using is to use scriptjs (a polyfill would work too), to async load whatever vender libraries I need, but make sure to include any/all require's after the script loads. For example, your index.js could be like:
$script.('/assets/vendor', function() {
var phaser = require('phaser');
//rest of code
});
It's especially nice for loading cdn files or having the ability to defer loading certain libraries that aren't necessarily used in the core app by every user, or loading libraries after client-side routing.

'Cannot find module' error using karma-browserify on Windows

I'm attempting to set up unit testing on an Angular/Browserify project using Karma, Karma-Jasmine, and Karma-Browserify. I'm on a Windows machine, for reference. karma-cli is on my global npm path, and karma, karma-jasmine, karma-browserify, and browserify are all local npm installs, using -D.
I'm trying to pull in a single spec file, which looks like:
var PhoneListCtrl = require('../../../public/js/app/controllers/phone-list');
describe('PhoneListCtrl', function() {
var scope,
ctrl;
beforeEach(function() {
scope = {};
ctrl = new PhoneListCtrl(scope);
});
it('should create "phones" model with 3 phones', function() {
expect(scope).not.toBe(undefined);
});
});
And I get the following error every time:
Uncaught Error: Cannot find module 'Cc/gGH'
I get this exact same error after cloning the following repos, installing karma and all plugins, and attempting to run their example test suites:
https://github.com/xdissent/karma-browserify
https://github.com/waye929/angular-browserify
What on earth am I doing wrong? The test spec module is found correctly, and karma seems to be finding all necessary plugins/preprocessors, but it appears that karma-browserify is tripping on the require statement in a spec every time, for reasons I cannot fathom.
I've uninstalled and reinstalled karma and all related plugins numerous times now, to no avail.
I managed to find a solution. The issue was caused by karma-browserify's own module name hashing function, which is incompatible with newer versions of browserify. There's a fork that deals with it by using browserify's hashing function:
https://github.com/voidlock/karma-browserify/commit/3afe3b7485f2e4723bba5ad1c5a730d560b8c234
There's a pull request pending but in the meantime you can use the fork by placing
"karma-browserify": "https://github.com/voidlock/karma-browserify/tarball/use-browserify-hash-function"
in your package.json (dev)dependencies section.

Resources