html5 boilerplate: how to add third-party js? - javascript

I am not a web developer, and though I believe this question must have a simple answer, I couldn't find it in the documentation, nor online.
I'll use html5 boilerplate to create a very simple app.
I would like to run
npm install an-arbitrary-js-library --save
gulp build
and be able to
import a_random_function from 'an-arbitrary-js-library'
in my js/main.js file.
How can I adapt my HTML5 Boilerplate to add third-party JS libraries to my project automatically?

Just put a script tag with the source referring to your library in the index.html file.
I don't know how you orginzed the project but you can copy the file of your third library from node_module to the project js/vendor or any other folders using gulp see from line 69 --> 95 here, this is the way they set jQuery in the project.

Related

How and with what help to build a js package, which will include and use all used dependencies

I have a `js` file that will use a third party library installed with `npm`. This file will be downloaded to the project when we go to a certain page.
Since the third-party library is used only on this page, I do not want to include it in the project, that is, I want to download it along with the js package. What I need to use for creating a js package which will contain all dependencies? I've been looking all day, but I can't find the solution.
I solved the situation like this: I copied the content of a third-party library and pasted it into a JS file before my code.
It can also be done using a webPacker by this guide

How to use external JS library methods in my Node.JS project if this library does not exist in NPM

I have a problem which can be easily solved by importing an external JS library into Node.js. However, this library does not exist in NPM.
I found out an old solution on StackOverflow which seems to fix the problem. However, it looks wierd.
Is there a more convenient solution in 2k20 to use external JS library methods into my Node.js code?
If your library have a package.json: You can install the package directly from the git repository, for example npm install https://github.com/vendor-creator/vendor-package. NOTE that for this method to work, in cases where the module has to be built, the git repository should contain a dist/ folder containing the built code or have in its package.json, a prepare step responsible for building the package upon installation.
If your library does not have a package.json and is simply a vanilla JavaScript file like the Lodash JavaScript file, I would advise just like in the post you linked, to create a vendor.js file (.min if the script is minified), copy and paste the content of the file and require it. Be aware that some libraries using CDN and not NPM, are designed for browser environment and may lack CommonJS support preventing you from using require. In that case you'll have to modify the library source code.
If it's a small library, there is no need to create an advanced build system. If the library is stable, just copy and paste it and you'll be fine. When in doubt always follow the K.I.S.S principle.

Add canvasjs library that does not exist in bower to my project

I would like to use CanvasJS library in my project but it does not exist in bower packages, so I tried to install it from a local zip file that I downloaded from their website. After successful installation the bower.json file includes the library's version and local path
"canvasjs-1.9.8": "C:\\path\\to\\myfolder\\canvasjs-1.9.8.zip"
Then if I try to build the project using gulp (e.g gulp serve), the library is not automatically added in the of index.html, as it happens for all the other libraries.
Is it a problem that it was installed from a local file? Is there another way to add CanvasJS library to my project and to my index.html file which is automatically generated with gulp build?
Thank you.
You can use gulp-inject in order to automatically inject code inside your index for example. Here the link:
https://www.npmjs.com/package/gulp-inject
So you can manually download your library (please include the .js version not the .zip), put it inside your project and dynamically include it inside the index using that plugin, adding a new task inside your gulp serve/build process.
You can also think to provide support for the library in the bower repository. It will make it available through bower to you and to the other users too in the future, if they may need it.
If you want to create a bower package, please refer to the official documentation that is really well done:
https://bower.io/docs/creating-packages/
For the bower installation I followed the instructions of this answer, and I assumed that using the .zip file that I downloaded would work. Since it didn't, the solution was to unistall it, un-compress the zip file and install the local .js file of the library. Then gulp serve command included the library in the index.html.

Deploying AngularJS 1.x - Webpack app to Tomcat

I've searched all over google and checked out the official docs for Webpack but have not had any luck finding a tutorial/guide/plugin to even do this. Has anyone done this before or should I just drop webpack altogether and go for a grunt-maven-war file generator instead?
Well, there is nothing special in building spring-boot with webpack. You can install node globally, you can install it during build...
You just add plugin to pom.xml to run node command i.e. (https://github.com/eirslett/frontend-maven-plugin)
And that actually it. It runs webpack and you get your js, css, fonts, ... files in some folder. Now you proceed like it is usual static assets, pack them into war and enjoy.

How to publish a browserify bundle for npm and the browser

I wrote an editor in HTML/JS that I want to use for multiple Electron based applications and a website.
For testing purposes I have package all dependencies, some are npm modules, some are font files, some are images, into a single file using browserify. For development I find this quite attractive as npm take care of keeping the packages up-to-date and browserify build even things like images and CSS into a single JS file. And included this bundle using a script tag in a html file.
Now I would love to get this onto npm to use as a dependency for other projects. But frankly I am at a loos as to how to do this.
Some blogs suggest to use:
module.exports = mymodule
But I want people and myself to be able to either get a single file and insert it using a script tag to get a global function to start my editor as well as require it using npm for Electron based apps.
startEditor = require('mymodule')
<script src="path/to/mymodule"></script>
Should both be valid ways to use the editor.
You can see the current state of the project on GitHub

Categories

Resources