I added highlight.js to bower.json and installed it.
But there are only sources of highlight.js, how can I compile it using bower?
Bower is just download the dependencies. Installation is depends on what development environment are you at? Single page application with Yeoman? Node.JS web application with Express? Or something else.
There are some JS task runners like grunt or gulp. I prefer grunt. If you are using grunt, there is exist grunt's task runner for it called grunt-bower-task that will install your downloaded bower components into specific folder that meets our need.
I recommend you to use/ learn Yeoman that is included yo the scaffolding, bower the dependencies manager, and grunt the task runner if you are starting single page application development.
So basically bower is just front end dependency manager unlike NPM which is NodeJS dependency/ package manager that we usually use at backend/ web server.
since you are using bower to install highlight.js, i believe it's used at client side.
you don't need to compile javascript at all, you just need to load it and use it globally.
there are several ways to load it into global execution context:
inline script in html <script src="path/to/bower/component/highlight.js"></script>
using front-end AMD modularization tool like requirejs
use front-end CMD modularization tool like browserify, webpack
Related
I'm trying to use an API via it's helpfully developed JS SDK. So the SDK instructions on the GitHub page are to npm install. I'm wondering though, does this imply I have to have Node.js because the SDK has been written specifically for it, or if I just have basic vanilla JS/jQuery, can I just.... Copy the source code from GitHub into my scripts or use it some other way?
It means that the project is using npm to handle dependencies. It has a package.json file that stores what those dependencies are, and npm install will download them into a folder usually called 'node_modules.'
It's dependency management. It doesn't mean it's written for node, but that it uses node to download external dependencies.
I have cloned the Angular2 quickstart repo and build a simple app. I want to publish it to the web now. It runs locally but it references files directly inside the node_modules directory.
Is there a standard build process I can run that will copy all needed files to the output directory? Or do I have to create this myself from scratch with a task runner or something?
This is my first time to answer a question so bear with me if I didnt do it correctly.
If "bundling all angular 2 ts/js and other dependencies (core.js, rxjs, zone.js) into one js and create a script tag on index.html to reference the bundled js" close to the standard build process you mentioned and you want, my answer is yes, you probably need to npm install some other tools to do it.
Since the angular 2 quickstart is using systemjs to do ES module loading, the tool you can use is called "systemjs builder" https://github.com/systemjs/builder which helps you to do bundling (based on systemjs.config.js) and yes, you can use a task tunner (grunt or gulp) with systemjs builder plugins (gulp-systemjs-builder or grunt-systemjs-builder) to create a task to "build".
You can use this https://github.com/AngularClass/angular2-webpack-starter
And using npm run build:dev or npm run build:prod
It will build a dist folder and that's all you need.
I'm completely new to frontend web dev with a very basic question. Once I npm install something, how do I actually use it? For example, I just did npm install bootstrap, and I would now like to be able to use the CSS and Javascript that it downloaded. I'm sure I shouldn't have to dig through the directories to find some entry point... so how do I now use bootstrap in my webpage?
Most modules on NPM are used in Node.js, for the server (backend). Node.js has a built-in function require('your-module') to make use of the module. This function is not present on the frontend in the browser. However, there are tools like browserify or webpack and probably others to make the NPM modules and the require function work in the frontend.
If you're just starting out I suggest you take a look at Bower first. With Bower (installed with NPM though) you can pull in all your frontend libraries like jQuery, Bootstrap, etc. to your project folder and you can point your script tags in your HTML to the bower_components/ directory, e.g. <script src="/bower_components/jquery/jquery.min.js"></script>. You can save a list of all libraries used with a version number in a json file called bower.json in the root of your project folder.
Based on this file you can pull in or update all the libraries listed with the use of the command line.
As a really general rule, npm is used for assets your node app will use on the server, while bower (and others) are the equivalent for dependencies that you want to use on the client.
That said, the use is basically the same.
npm (and bower) install the files into your project directory in a standard location. All you really have to do is make sure that location is accessible via a web request (typically, node_modules is not; which is why bower came about), and then embed link and script tags as appropriate in your html:
<script src='/node_modules/bootstrap/js/bootstrap.min.js'></script>
I am new to whole front-end tooling and I am trying to start a new jquery plugin project. So, with Grunt I used grunt-init-jquery to make me a boilerplate jquery plugin project and it already has unminified versions of client framework dependecies as well such as jquery and qunit.
It also generates package.json which I can edit to contain dependencies so, how does Bower fit here? or is optional and I can handle both server and client side dependencies with Grunt only?
I think you are confusing Grunt with Npm, because the Grunt cannot handle dependencies, it's "simply" a task runner. The package.json file is here because you need the devDependencies for the Grunt installation and all its plugins (like grunt-contrib-concat). This file is associated with Npm and not specifically Grunt.
Bower is solely for front-end dependencies. Even if you can handle them with Npm, it's better to use Bower since it's optimized for this purpose (no deep dependencies among other things).
So manage the things you need for the development of your plugin with Npm, and Bower for your plugin dependencies (since a jQuery plugin is usually for the front-end).
I'm writing an application using Grunt as my build tool. I used the Yeoman generator angular-fullstack. The app is a Node.js app with Express on the backend. While developing, things work fine. If I build the distribution though, I can't deploy it to my server because none of the required npm dependencies are available, like Express for example. It's the first time I build this kind of app, so I assume I'm missing a step since the Gruntfile.js is still all defaults.
The "node_modules" folder is traditionally not included into source code repositories, for various reasons.
If you set up your node application correctly, however, and you have a "package.json" file where all dependencies are listed, then you just need to run npm install to download and install npm modules.