Gulp require html in javascript file like webpack - javascript

There is a way to require html file in javascript file like webpack does with gulp?
For example in Angular js directive:
return {
template: require('./../index.html),
link : function() {}
}

No, angularjs is a client-side framework that is meant to run in a browser. Within a browser you generally speaking are not meant to be reading local files even if the purpose is just for including/requiring files.
Webpack is actually a node module (npm) that runs under nodejs. The require method is added by nodejs and allows you to load other javascript files. However, nodejs modules are always run by nodejs and never in the browser.
Having said that, there might be solutions to achieve what you want, here is one discussion of a similar issue.

Related

How do I bundle npm Halfmoon's JS with existing code via Gulp?

So, I want to use the Halfmoon framework in a personal project and I have it downloaded via npm. In order to use the Javascript it shows as an example (in this page https://www.gethalfmoon.com/docs/download/#using-npm) to import the library with a require statement.
var halfmoon = require("halfmoon");
halfmoon.onDOMContentLoaded();
I was hoping to bundle this code with any future Javascript files into one large scripts.js file, but require statements do not work in browsers.
Browserify seemed like a good option, but there is no up-to-date plugin for gulp. Ran into similar issues with Rollup where the gulp plugin was problematic.
My hope was to have a gulp function structured like this:
function bundle() {
return gulp.src('./src/js/main.js')
.pipe(theFunctionThatMakesItWork())
.pipe(gulp.dest('./static/js'));
}
I am not completely attached to doing this in gulp but that would be my preference.
I am not entirely sure if this will work, but you could probably try downloading the halfmoon.js file on Github. It is different from the one in npm, mainly that it is meant to run using the <script> tag, and doesn't need the require statement.
Link to the file on Github: https://github.com/halfmoonui/halfmoon/blob/master/js/halfmoon.js
Edit: Also, on this file, the halfmoonOnDOMContentLoaded() is run automatically when the DOM is loaded.

'Require is not defined' in Netbeans - Javascript

I am new to Javascript and am interested in using a library from github. I am using netbeans to code and I have installed node.js. However, I am still getting the error 'Require is not defined'. I have installed 'browserify' as this seemed like a common solution, but I am still getting this error.
Am I doing something wrong?
Image of set up libraries
Update
I have also found that there is a problem with one of my libraries, think it could be relevant to the original problem.
Problem with library
If you are developing NodeJS based project, you should use NodeJS project type in NetBeans where require() is considered as known global function and as such NetBeans won't show the hint.You can change your current project to enable NodeJS support by right clicking on the project, select Project Properties -> NodeJS and check Enable NodeJS support.
If you are using RequireJS library, you can also enable RequireJS support in Project Properties in JavaScript Frameworks -> RequireJS
I guess this is because require() does not exist in the browser/client-side JavaScript.Can you give it a try to following statements;
Use <script> tag.
Use a CommmonJS implementation. Synchronous
dependencies like Node.js
Use an AMD implementation.
And keep library codes and application codes seperated. ( bundle.js and script.js )
Browserify will take all the script files necessary and put them into the "bundle.js" file, so you should only have to include "bundle.js" in the HTML file, not the "script.js" file.

Is it possible to load twilio.js library with webpack?

What i need is a way to bundle all my javascript dependencies into one javascript file with Webpack (Just like with socket.io-client), but i can't do that with twilio.js.
I can see that the latest of twilio.js is listed here.:
https://www.twilio.com/docs/client/twilio-js as a script tag to:
//static.twilio.com/libs/twiliojs/1.2/twilio.min.js
But this is just a loader script for building the real twilio.js library here:
https://static.twilio.com/libs/twiliojs/refs/82278dd/twilio.min.js
And none of these supports Webpack.
https://github.com/twilio/twilio-node also exsistes, but this is for node.js only - not just plain client side javascript.
So my question is, is there a way to require the twilio.js library with Webpack ?
This answer is for Twilio.js client version 1.3.16 (script file, documentation).
The Twilio codebase is pretty bad. They don't publish their code to npm, and simply loading the twilio.js file from their CDN has side effects, including reading from window and looping through all script tags on the page. This means, even with the below answer, the client code can't be loaded in node, blocking server side rendering and testing, etc.
I published the package to npm as a mirror of the code, but it's not straightforward to use. Webpack can't correctly handle whatever bogus require structure they have set up. First, install:
npm install --save twilio-client-mirror
Then to use, require as normal:
import * as loadTwilio from 'twilio-client-mirror';
However, you can't actually use the loadTwilio object. You have to reference the global Twilio object, injected by the script:
const Twilio = window.Twilio;
Twilio.Device.setup(token);
...
This is a first attempt I made to try to include this flaky code inside a modern codebase. Hopefully with the coming 1.4 beta they will address these issues.
I know this is late, but I, too, just wrestled with this issue. Being new to Node, TypeScript and Webpack, I failed to understand that Webpack should be used for client-side scripts, while the Twilio-node library is a server-side library (as discussed loosely here). In other words, you shouldn't use require('twilio') in any client-side scripts...only Node scripts.
I had success with the following:
Add <script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script> to my main .html page
Use var twilio = require('twilio'); inside of a Node (server) script...not in client-side JavaScript (for example, add the Twilio calls inside of API methods, which can be created using a framework such as Express)
If you happen to be using TypeScript for Node scripting, use a transpiler such as the native TypeScript transpiler tsc (easy to do from a command line). If using JavaScript, use GulpJS (my fave) or GruntJS to help you consolidate and even run your Node server-side scripts
Use Webpack for anything else
Again, I'm new to this, so I'm open to input or corrections if I've stated anything incorrectly.

Compiling Modular Client-side Javascript

In Node.js, you can dynamically "require()" any javascript file likewise to PHP's require. I'd like to use this in my client-side code just for ease of development but not actually call a javascript function, but have a compiler replace the line with the contents of the respective file; effectively concatenating the files, not one after another, but inline within the code of one of the files. The closest thing I have found to this is smash. Are there any compilers, minifiers, etc that can do this?
Browserify might not be exactly what you want but it does definitely help with the ease of development issue. When you use Browserify, your code is your build tool. Browserify gives you all the benefits of writing code in node (no anon functions to avoid globals, npm, simple requires, imports instead of namespaced globals) and it allows you to package that code to run on the client with one command and only load one file.
You can checkout my open source js framework Luc JS for an example. It runs on node and IE6. I'm able keep the code modular and build the single browser file with a one line command.

Concatenate NPM package into one JS file

I am trying to get Swig (the template language) working on Parse Cloud Code with Express. Parse Cloud Code is a Node/Express host that doesn't allow NPM. Ridiculous, I know. I can still load external files into code with requires statements however, so I think that there's hope I can get this working.
So my question is how do I get the whole entire Swig package into a single JS file that I can include from my Parse Express app like so:
var swig = require("./cloud/swig.js");
Worth noting that Parse breaks normal require statements so that the NPM package as-is doesn't work without modifying each and every single file in the node_modules folder to have cloud in its path (which is why my above path has cloud in it). Parse also chokes while uploading lots of small files. Concatenation is a need on this platform.
I have tried playing with browserify for hours, but no combination of anything I do makes exposes the Swig object when I load the browserified file with the require statement. I think it may be the right option since the Browserified file includes all the files from Swig, but it doesn't expose them externally.
My question is either can this be done in browserify, and if so, how? Or is there another way to concatenate a NPM repo down to one file so it can be more easily included from this platform?
Thanks so much.
Browserify is not the right tool for the job.
As the name implies, browserify is intended to be used to generate files you want to execute in the browser. It walks the require calls from an entrypoint (i.e. some JS file you pass to browserify) and bundles them in an object that maps their names to functions wrapping the modules. It does not expect a require function to already exist and doesn't make any use of it. It substitutes its own implementation of require that only does one thing: look up names from the bundle, execute the matching function and return its exports.
You could theoretically require a browserify bundle, but it would just return an empty object (although it might mess with globals). And in all likelihood it might break because the bundled modules think they are being executed in a browser. This won't do any good.
The only sane option if you want to stick with the host, is to copy over the node_modules folder from your local project folder. This may not work if your computer and the server are not 100% compatible (e.g. 32-bit vs 64-bit, Debian vs RedHat, OSX/Windows vs Linux) but this mostly depends on your exact dependencies (basically anything that is built with node-gyp can be a problem).
Node.js uses the node_modules folder when looking up dependencies in require calls automagically. If you can somehow get a node_modules folder with the right contents on the server, require("foo") will work as long as node_modules contains a module foo.
Ultimately, you are trying to use npm modules in Parse Cloud code and currently it's not possible:
https://parse.com/questions/using-npm-modules-in-cloud-code
But if you are only trying to use Swig, then as a work-around, you can consider using underscore template instead. Parse already includes underscore:
https://parse.com/docs/cloud_modules_guide#underscore

Categories