I'm using FoundationPress theme for WordPress and installed it using Node.js. Now I want to install Perfect Scrollbar and I did so using npm install perfect-scrollbar but I don't know how to use it. I can now see it under node_modules. I don't know where to import the css and the js file.
I import .scss using the foundation.scss file. I'm adding the js by adding a .js file to js/custom and then running grunt build.
Do I also put it there or there's a nicer way to use the installed package? I've also run grunt build but didn't see the script running in my theme.
I'm using Git Bash command line to do all this. Not sure if that helps. I have only started using Node.js
Related
For example, I created folder, opened it with VS Code. Opened a terminal, used the command npm install jquery, it creates a folder node_modules within my created folder. I then create an HTML file, put HTML template in and now I want to reference jQuery. I know how to reference the files syntactically and all that, I am just looking to understand best practices.
Do I just reference jQuery... JavaScript files within there? Or am I missing a step?
before starting on a new project you should use npm init. this will initialize the project and generate a package.json file. This package.json file is used for managing the project's dependencies(libraries), scripts, version etc.
And after this every time you install a library using npm it will get listed in this package.json file under dependencies section.
example after initializing the npm:
npm i jquery
and you can get it using
const jquery = require('jquery')
or
import jquery from 'jquery';
i.e; without using the relative path, example:
import jquery from '../../node_modules/jquery..'
It sounds like you are missing the build step.
When developing with npm, you usually use a toolchain with compilers, bundlers and minifiers, which read the libraries from the node_modules folder and put the resources in a build folder which actually gets deployed, and from where the js file will be loaded.
I'm new to yarn.
So I've my rails 5.1 application with yarn, I want to add this package:
https://yarnpkg.com/en/package/swal
So I do:
yarn add swal
it got added to node-modules/swal a lot of files but not the js that I should require.
I go to that folder and do npm install.
but I still dont have my swal.js to include...
I read the README and it says to run npm run build, it throws a dependency with vue error.
So I start to wonder.. I 've to investigate how to build each JS? Is that better than just get the .js already compiled and put it on vendor folder?
Anyway my question here is concrete, what is the way to add swal.
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.
Using Ionic, how can I compile/include stanza.bundle.js without the need of browserify? Or should I just get used to use browserify?
I'm trying to add the Stanza.io library to my Ionic app.
I was thinking about including it like that:
<script src="stanza.bundle.js"></script>
But there are so many JS link in the stanza.bundle.js files that I need to copy to my www folder, without knowing if it will works. Also, all JS links are absolute paths.
The commands I used to compile Stanza.io
npm install stanza.io
cd node_modules/stanza.io
npm install
make
I'm not very familiar with npm, that's why my question doesn't go very deep.
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>