These are chat archives for biojs/biojs

5th
Apr 2016
maudema
@maudema
Apr 05 2016 08:23

Hi !

I'm new to biojs and I've tried to do the Snipspector tutorial on http://edu.biojs.net/snipspector/vis_basics/ .
When I try to see the output in a html file ( 5) See first output) , I have the error message :
« ReferenceError: require is not defined »

My understanding is that « require » is not supported by web browser and that using of browserified version avoids having to use « require ».

Do you have any solution ?

Thank you in advance.

Gaston Che
@gastonche
Apr 05 2016 11:17
@maudema make sure you run "npm run build" or "npm run install " if you have CSS to build
maudema
@maudema
Apr 05 2016 11:33
@gastonche I effectively have run "npm run build" and I can see an output when I run "npm run sniper". I have this issue only when I use a HTML file to call the visualization module.
Gaston Che
@gastonche
Apr 05 2016 11:42
Sniper is specialized to take care of require. To use normal html then you just have to include your built js file with an html script element and then ask you need to do is instantiate a new object of the class you built in your package like "obj= new package(options)."
@maudema try to use the methods defined in your package the sane way you would normally do with require but this time replace require with a script tag including you built package.
maudema
@maudema
Apr 05 2016 12:21
@gastonche I have included the built package in my html file and I have instantiated a new object of the class, like it is defined in "index.js" (I have used "slush biojs" to create the package) . Now I obtain an error saying that my class is not defined . Could the issue comes from web browsers configurations ?
Gaston Che
@gastonche
Apr 05 2016 12:46
You have to include instead the JavaScript file generated in the generates in the build folder of your project not the index.js file in lib
maudema
@maudema
Apr 05 2016 12:51
Yes , I include the file created in the build directory (and use the definition of the class , in the index file , as model).
Gaston Che
@gastonche
Apr 05 2016 12:55
var object = new  paser();
<script src="../build/file.js"></script>
<script type="text/javascript">
var obj=new visual() ;
obj.render();
May be i don't understand you clearly. Maybe you should take a look at my package on the registry biojs.io/d/expression-viewer or clone it from github at github.com/gastonche/expression-viewer.
get back to me if you still have problems.
maudema
@maudema
Apr 05 2016 13:05

I understand what you explain me to do , and I have exactly do it my index.js file contains /*

/*
@class biojsvissnipspector
/

var biojsvissnipspector;

module.exports = biojsvissnipspector = function(opts){
this.el = opts.el;
this.el.textContent = biojsvissnipspector.hello(opts.text);
};

/**

  • Private Methods
    */

/*

  • Public Methods
    */

/**

  • Method responsible to say Hello
    *
  • @example
    *
  • biojsvissnipspector.hello('biojs');
    *
  • @method hello
  • @param {String} name Name of a person
  • @return {String} Returns hello name
    */

biojsvissnipspector.hello = function (name) {

return 'hello ' + name;
};

and my html page

<div id=simple></div>

<script type = text/javascript src="./build/snipspector.min.js"></script>
<script>
app = new biojsvissnipspector ({el: document.getElementById("simple"), text: 'biojs'});
</script>

It seems simply , but I don't understand my mistake. Thank you for your help.
Gaston Che
@gastonche
Apr 05 2016 13:09
remove the ```
module.exports=
````
remove
module.exports=
maudema
@maudema
Apr 05 2016 13:19
I have removed "module.exports = " and run "npm run build" but the error message " ReferenceError: biojsvissnipspector is not defined" persist.
Gaston Che
@gastonche
Apr 05 2016 13:21
try to test id the built file is being loaded by adding an alert() at the top. and get back to me pls
maudema
@maudema
Apr 05 2016 13:26
I've tried it , the alert is generated .
Gaston Che
@gastonche
Apr 05 2016 13:50
if it runs when you view it with sniper then. then build it and run
```
npm run sniper -c
this will create static output files in the examples-outdirectory in the root folder of your project. That should give you what you want
maudema
@maudema
Apr 05 2016 13:54
@gastonche It works ! I add require() just to test and it works. Finally it is necessary to store "require('package') " in a variable and after instantiate a new object from the variable ( "var p = require('package') ;" an then " obj = new p (opts);")
@gastonche Thank you so much for your help !
Gaston Che
@gastonche
Apr 05 2016 13:55
okay that's great. Good luck as you learn further.