I installed bootstrap via npm and i'd like to require it via browserify, so I use:
require('bootstrap');
But there are 2 problems here:
It takes the non minified version of bootstrap
I would also like to include the bootstrap.tpl.min file
How can i do it?
Unfortunately browserify won't solve either of those problems for you. NPM packages are meant to be small and solve one problem well and browserify's domain is resolving all the dependencies you require and packaging them up into one file for the browser.
Minification of your bundle should happen as part of your build step using gulp or grunt using a package like uglify.
Including a template file will also require some additional work if it's not included in what's exported from bootstrap. You can either require the specific file from the module if you need access to it in code, or you could copy it to the directory that you're serving up either with your build tool or using bower
Related
If i generate a bundle of a library, should I put the library dependencies in devDependencies?
I'm authoring a NPM library written in TypeScript which uses a quite amount of dependencies, such as React components.
We do some build steps to compile down to JavaScript files, apply minification and bundle into a single JS file.
The final published package for this library will contain just a JS file, the output of this build steps.
When I install the package all the dependencies of this library will be installed as well. Should I put those libraries as devDependencies instead in the package.json, given that they are not needed because the JS file will already bundle them?
Not sure about the way you build.
Not needed to put all devdependencies if it is already part of the js file.
If it is going to be only a js file, it can be hosted as CDN file.
When I install a JS library with npm, say:
npm install chartjs
It places the required JS file in ./node_modules/chartjs/chart.js.
Since I want the file to be located in, say, ./public/js/chart.js, I could just copy and paste it there. But is there a proper way to do that, like linking directly to the file installed by npm ?
Thanks in advance for your help. (Yes I'm kind of new to JS...)
In general, if you are using npm to manage your dependencies then you would use a bundler (such as Rollup, Webpack, or Parcel) to combine them into a browser-friendly file in your distribution directory.
MDN has a tutorial which walks through setting up a basic project in Parcel.
I am relatively new to using git and GitHub, and I am working on my personal website. I am using the JS plugin Slick, a responsive carousel feature. I downloaded all of the necessary files and stored them within my local repo. The size and content of the Slick zip folder is much larger than the files for my site at the moment, so when syncing with GitHub this makes my project appear as 75% Javascript, whereas the actual website is not.
Am I doing this correctly, storing the files for my JS plugin directly within my repository folder? Or should I be using some other method to implement Slick on my site? Or is this just something I should not be worried about? Thanks
If you're just using one library, manually storing it in your Git repo is fine. You'd have to manually update the files if a new version is released, but that's not a big deal for one library. (And you might not even care about updates to this library).
However if you're using more than one library, I'd highly recommend using Node Package Manager (NPM) and a build tool like Webpack.
Here's an article that introduces these tools (plus a few others): https://medium.com/front-end-hacking/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987
For using git, you should store your dependencies in a folder that is in your .gitignore. If you install browserify or another similar tool like webpack, you can use the npm package manager to create a dependency list file with npm init that allows for easy package installation with npm install by anyone. You can install packages slick with npm install --saveslick-carousel and use them with require() in your main js file. Then, take your js file and run browserify jsfile.js -o outputfile.js and it will package your js and your dependencies together to be used by the browser
When uploading to your git repo, add a .gitignore like this one for Node. This prevents your dependencies from being uploaded to the repo and instead when someone wants to run your project, they must run npm install to get all the dependencies.
Browserify gives an output JS file you add to your web server, the name of this file should be put in your .gitignore as well. Your code is stored in the js file you pass to browserify and other people can still access it without the output file, but they need to run the browserify command to package your code.
I'm struggling to get my head around how npm manages dependencies - in terms of how they are actually referenced in HTML.
Say I have a specific version of a plugin installed, which includes a version number in its path or file name - if npm is configured to update to a new minor release - the files referenced via script tags will no longer be present.
I've also read that exposing node_modules path is incorrect and should be avoided.
How then should these files be referenced so that they are loaded and so version updates do not break a site?
The idea is that you use these modules in your code. Let's say you have a main.js file which has your application, then you import modules using import $ from 'jquery'; (this could depend on your configuration, you could also use 'require'). Then use a tool like browserify which is going resolve all your dependencies for you and package it into a nice file which can then be loaded into your browser.
This is only one setup out of many so this could vary, for example if you use webpack this will be different but the idea is the same, you import what you need into your main.js.
npm uses package.json file as reference to build dependency map. And installs all dependencies in node_modules folder. When you publish an update to your module, you also publish a new version of package.json file which will include modifications to dependencies.
So short answer is - package.json file... I hope you can figure things out from this.
My browserify project is dependent on another browserify bundle, which uses standalone bundling. According to docs (on jquery example) I'm supposed to include it as a separate file. But I'd like to have my project in single file (as are my automatisation tools set up at the mooment). If I don't exclude it, my browserify fails to build as it complains about requires to nonexistant paths within dependency.
Is there a simple way to incorporate standalone build into my bundle?
Project I'm dependent on is Matterjs (link to this specific build)
Found it! Add this to your browserify config:
{
noParse: [require.resolve('matter-js')]
}