I have 2 model files containing a constructor in each, and an index.js file, that I wish to use to insert elements into a HTML file, using innerHTML. I want to use one of the variables from the js model file, however when I try to require the files in the index.js file, the innerHTML file suddenly stops working. Please note, the code in the current `window.onload' function is inserting h1 elements as a test, I will be replacing this with a return value from the constructor, but at the moment, when I require the files, even the h1 insert stops working. Code snippets that I think are relevant can be seen below:
index.js file:
var ToDo = require('../src/toDo.js');
var ToDoList = require('../src/toDoList.js');
window.onload = function() {
// create a couple of elements in an otherwise empty HTML page
var heading = document.createElement("h1");
var heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
Model file 1:
function ToDo(task) {
this.task = task;
this.complete = false;
}
module.exports = ToDo;
function ToDoList() {
this.array = [];
}
ToDoList.prototype.add = function(task) {
this.array.push(task);
};
ToDoList.prototype.popTask = function() {
var poppedTask = this.array.pop();
var concat = "<ul><li>";
var concat2 = "</li></ul>";
return (concat + poppedTask.task + concat2);
};
module.exports = ToDoList;
require is CommonJs feature, and it's not supported by browsers without this library. So you would need to use it in your project if you want modules with require syntax.
Update
To use require feature, you would need some module loader. There are two very popular that you could check out - Webpack or Browserify. They both support CommonJS require that you are looking for. As for me, I like webpack most, cause it is very powerful out of the box.
To read about their comparison :
https://medium.com/#housecor/browserify-vs-webpack-b3d7ca08a0a9#.lb3sscovr
RequireJS is another module loader, but he works not with CommonJs-style modules (require). He implements AMD-style modules.
You can check this article to understand how AMD is different from CommonJS:
https://auth0.com/blog/2016/03/15/javascript-module-systems-showdown/
Related
I have a javascript file including many files by the use of require. Some of them are helper files. While other are functions of nodes. I want those helper functions to be included anywhere.
module.exports = {
node1: require('node1.js'),
functions1: require('./functionsq.js'),
}
However, this way i cannot use function1 in node1. Is there a way to use functions1 in node1, while it must not be included in the node file again by require?
**var f=require('functions.js')**
var node1={
...
}
I understand that Pug does not support dynamic includes or extends in templates. Ie
extend path/to/template
works but not
extend #{dynamic_path_to_template}
Is there a workaround (however convoluted) that will allow the same goal of modifying the template used by a view at runtime
Context: My use case is that I am developing an npm module and the template being used to extend other views is located inside the module. After the module is published and installed, the path will be defined (ie. node_modules/my_module/path/to/template) but during the development phase, I need to just be able to "npm link" to the module and have the templates work. I also would prefer not to hard code the links so I can publish the same code as tested.
I had this issue aswell and found this question while searching for a solution. My solution is similar to Nikolay Schambergs Answer, but i thought i should share it.
I've created a function that renders templates by giving it a path and passed it to the options object. Maybe it helps in your case aswell
const includeFunc = (pathToPug, options = {}) => {
return pug.renderFile(pathToPug, options); //render the pug file
}
const html = pug.renderFile('template.pug', {include: includeFunc});
and then use it as followed in your template:
body
h1 Hello World
|!{include(dynamicPugFilePathFromVariable)}
There is no way to do this for now, but you can work out your application architecture without dynamic extends.
Possible solution #1
Make a layout.jade that conditionally include multiple layouts:
layout.jade:
if conditionalVariable
include firstLayout.jade
else
include otherLayout
In your view, extend layout.jade, and define conditionalVariable in the controller (true/false):
view.jade:
extends layout
block content
p here goes my content!
Possible solution #2
Pass configurations to the layout
- var lang = req.getLocale();
doctype html
block modifyLayout
split the project into multiple entrances, each entrance extends the layout and passes its different configs, and includes different things in different blocks
extends ../layout
block modifyLayout
- var lang = "en" //force language to be en in this page.
block body
include my-page-body
Possible solution #3
use something like terraform which uses pug as its rendering engine, but it enables you to use dynamic partials like this
!= partial(dynamicFileFromVariable)
It works!
First, set res.locals middleware.
middlewares/setResLocals.js
const pug = require('pug')
const path = require('path')
module.exports = function(req, res, next) {
res.locals.include = (pathToPug, options = {}) => { // used for imitate includ pug function
return pug.renderFile(pathToPug, options); //render the pug file
}
res.locals.__PATH__ = path.join(__dirname, '../')
next()
}
server/index.js
app.use(require('../middlewares/setResLocals'))
file.pug
|!{include(`${__PATH__}/${something}`)}
In order to do dynamic include, you will have to use Unescaped String Interpolation, inserting pug contents that are pre-compiled before your main .pug file inside your route. In other words it works as follows:
1) Some .pug files are pre-compiled into HTML
2) The HTML gets fed into another .pug file compilation process
Here's an example how to do it
Inside your router file (routes.js or whatever)
var pug = require('pug')
var html = []
var files = ['file1','file2'] // file names in your views folders
let dir = path.resolve(path.dirname(require.main.filename) + `/app/server/views/`)
//dir is the folder with your templates
app.get('/some-route', (req,res) => {
for (let n = 0; n < files.length; n++) {
let file = path.resolve(dir + '/' + files[n] + `.pug`)
fs.access(file, fs.constants.F_OK, (err) => {
if (!err) {
html.push(pug.renderFile(file, data))
if (n === files.length - 1) {
res.render('dashboard', {html})
}
}
else {
res.status(500).json({code:500,status:"error", error:"system-error"})
}
})
}
})
Inside your desired .pug file:
for item in html
.
!{item}
The example above is specific to my own use case, but it should be easy enough to adapt it.
I know, this is a bit late for answering. But I found a possibility suitable for my purpose by this bit of information from the pug docs:
If the path is absolute (e.g., include /root.pug), it is resolved by
prepending options.basedir. Otherwise, paths are resolved relative to
the current file being compiled.
So, I provide most of my pug modules by relative paths and the stuff I want to exchange dynamically is organised in pug files of the same name but in different folders (think theme) and include them by absolute paths . Then I change the basedir option to dynamically choose a set of pug files (like choosing the theme).
May this help others, too.
I'm trying to write a webpack loader, and one of the requirements is that I need to inject code ONCE into each bundle.
Is there a way in the loader to detect if the module I'm processing is an entry point? If not, is there an easy way to inject code once per bundle?
You can inject code like you inject code normally. Your loader should return the transformed source with a require to the code you need to inject once. Webpack's documentation covers this referring to this common code as a runtime for the loader. http://webpack.github.io/docs/how-to-write-a-loader.html#extract-common-code
var loaderUtils = require('loader-utils');
module.exports = function(content) {
return "require(" +
loaderUtils.stringifyRequest(this, "!" + require.resolve("./runtime")) +
");\n\n" +
content;
};
Is this helpful?
module.exports = function (content) {
if (this.options.entry == this.resourcePath)
content = 'var newCode = 10;\r\n\r\n' + content;
return content;
};
I am using this to inject code on the entry file only.
You can't use loaders on entry points (as well as you can't depends on entry points).
So if you want to inject some code through the loader you have to require on it in each entry point.
I've recently started writing CommonJS modules but facing issues in requiring modules. Why is storage.js unable to reach the example module which I have required? What is the proper way to require a dependent module in this case?
EDIT: Included more information because the previous question omitted hello.js, which I thought wasn't the cause of the problem. Seems like including it causes a uncaught type error. Also, this is part of the code for a chrome extension, and main.js is the content script.
// main.js
var hello = require('./hello');
var storage = require('./storage');
var example = require('./example');
storage.store();
// storage.js
var example = require('./example');
module.exports = (function() {
function store() {example.ex();}
return {store: store};
})();
// example.js
var storage = require('./storage');
module.exports = (function() {
function ex() {
console.log('example');
}
return {ex: ex};
})();
// hello.js
var example = require('./example'); // <<<< Including this gives Uncaught TypeError: example.ex is not a function
module.exports = (function() {
function hello() {
console.log('hello');
}
return {hello:hello};
})();
Not a direct answer to your question, but Browserify will wrap in a self-invoking function for you. You can simplify your lib files:
// main.js
var storage = require('./storage');
storage.store();
Because you don't use hello or example, don't require them.
// storage.js
var example = require('./example');
function store() {example.ex();}
module.exports.store = store;
No need to go through the self-invoking function here.
// example.js
module.exports.ex = ex;
function ex() {
console.log('Example');
}
This doesn't use storage, so don't include it.
hello.js does nothing but trigger the circular dependency, remove it.
In your updated code, you have a circular dependency between storage.js and example.js. Because you don't use anything from storage in example, you can just remove that require. I still think you should remove the self-invoking functions, as that's already part of commonjs.
When loading a module, Commonjs will only execute the file a single time. Everything on module.exports is then cached for future calls. When you include the circular dependency for the first time, the module loader sees that its currently being loaded, and you don't get any results back. Subsequent calls will complete as normal.
Following another question, I understand I am facing a module caching caveat issue. Obviously, several instances of the same module are created in my project.
I am requiring the module from other modules located in different folders:
var mm = require("./myModule.js");
...
var mm = require("../myDir/myModule.js");
...
var mm = require("../../MyDir/myModule.js");
...
I have been trying to create a unique instance of myModule (singleton) using an object and by exporting it:
var myModule = function() {
if (!(this instanceof myModule)) { return new myModule(); }
...
};
...
module.exports = new myModule();
Yet, it does not solve the issue. What is the right way to declare a singleton in node.js? And how to retrieve the instance in other modules?
It's a Windows issue: file paths in Windows are case insensitive, so ./File.txt and ./file.txt refer to the same file. The problem is, that node is not aware of that and uses resolved file paths as cache keys, so it's possible to load same module multiple times using different casing.
More about that issue and discussion: https://github.com/joyent/node/issues/6000
Solution (kind of): don't use upper case in file and directory names inside node projects
That pattern definitely works for a singleton.
// singleton.js
module.exports = new Singleton
function Singleton () {
this.rand = Math.random()
}
// one.js
var singleton = require('./singleton')
console.log(singleton.rand)
// two.js
require('./one')
var singleton = require('./singleton')
console.log(singleton.rand)
Sure enough consistent output.
0.7851003650575876
0.7851003650575876