NPM package - reference source file - javascript

I was wondering if it was possible to reference the source file of a Node JS NPM package. (As in the code inside of /node-modules/package-name)
I've thought about going up a directory until the node-modules folder is found, but I'm not sure if that would work with some file structures. Can packages be used with require if the node-modules folder is below the javascript file?
Any help is great, thanks.

Related

How to compile a folder with multiple files JS format, node_modules, package.json to an executable

Good evening, I would like to know if there's a way to compile what I asked in the title to an executable. I've tried in the past using the node library /nexe with success, but the exe would work only inside the root folder with all its components. If you try to run it outside the folder it won't work. I've tried pkg but without success as it would crash when opening. I've tried Dino but same result. If there's something I'm missing let me know.
The root folder structure is pretty simple and contains the following.
node_modules
package.json
package-lock.json
folder with JS files that are connected to main.js
main.js

What is the best practice to reference JavaScript libraries that when installed via NPM (in the node_modules folder)?

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.

How to make electron-packager to use outer directory files while packaging

I am trying to package my electron app, which is basically two npm directories one inside other. The internal npm directory is my electron app and it makes use of the outer directory scripts. My internal package.json file which is associated with electron app is where I define my electron-packager scripts. I have a question here, I have given my source file for the package as '.' which means present directory, does this also consider the files in the outer directory? I tried this and my app is working fine for now, but I doubt if somewhere something can go wrong if I am not doing this properly. If this is not the proper way how can I tell electron-packager to consider files outside of the current directory? or Does it automatically consider all the required files and scripts irrespective of their path while packaging?
It automatically considers all the files present in the current directory which includes the package.json file. Also I found 'Bolt' useful while working with multiple npm packages.
https://www.npmjs.com/package/bolt

.js Files Transpiled From .ts Files Don't Run In Browser

I'm trying to use the h264-converter npm package (https://www.npmjs.com/package/h264-converter).
It is written in TypeScript. When I run npm install --save h264-converter I get a folder with the .ts TypeScript files, but it also comes with the .js Javascript files in the same folder already transpiled for you.
However, the .js files it comes with do not run in a browser. They contain Require(...) functions and undefined objects like exports that cause them not to run in a browser. Simply including these .js files with <script> tags causes errors. I did some reading and tried to use the browserify npm package (https://www.npmjs.com/package/browserify) to create .js files that work in a browser from .js files that don't. I ran
browserify "C:\...\h264-converter\dist\index.js" > "C:\...\h264-converter\dist\bundle.js"
like the in the example on the browserfiy main page and it seemed to run without error (their example uses main.js instead of index.js but I think index.js serves the same purpose). It created bundle.js. However, bundle.js still doesn't run in a broswer. bundle.js still has Require(...) functions.
How do I get the .js files that come with h264-converter npm package to run in a browser?
I can post the contents of some of the .js files that the h264-converter npm package comes with if that will help. Thanks.
npm package
To use an npm (node style commonjs) package in the browser you should use a a module bundler like webpack.

Cordova: How to include .js .css files from node_modules after npm install

How do i get my app to read .js and .css files after npm install?
What i did was:
npm install bootstrap#3
After which, the bootstrap folder goes into my node_modules folder. /node_modules/bootstrap I followed through with compiling the css and js files using grunt:
grunt dist
and it creates a dist folder in /node_modules/bootstrap/.
What i did now was to move the dist folder from "/node_modules/bootstrap/" into my public folder "/www" so i can include it into my page located in my public folder "/www/index.html"
But somehow this feels wrong and I'm not sure if i'm going the right way.
Looking around for some resource but just can't get much information. Anyone can provide a solution or direct me to some right resource so that i can find out more. Thanks.
I think you're actually doing fine, since bootstrap is only based on those .css & .js files.

Categories

Resources