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

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.

Related

NPM package - reference source file

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.

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.

Should I upload "node_modules"?

I am making a web page, node_modules file is around 150 megabytes, should I upload it or not? Is there any way to make it smaller? I am using "filezilla" and it would take too long to upload it.
Node modules is where all the external libraries you use for your application are kept. The list of those libraries should be mentioned in package.json file.
You should, typically, not upload node modules folder manually. They are the external libraries and are easily available to install separately. So, when moving files through filezilla, move everything but node modules. Then, in your server, simple run npm i before running the application.
If you have a package.json file and used npm module -s <package_name> (with -s or --save) then everything was fine.
If you don't have it no worries.Transfer the files into your online services like AWS,Something like that.
Then give the commands.
// For install npm
npm i
(or)
npm install
// To start your server
npm start
Whatever you put in your package.json file Start Object the file will be triggered.
No need to copy the node_modules folder at all.

Browserify for using node modules in website

I am trying to use browserify, and I installed it using the command npm install -g browserify. And now I am not sure how to include it on the website. Because if I include the index.js it still throws error because of the requires used in index file.I would be very grateful if someone can explain me how it works.
<script src="js/browserify/index.js"></script>
<script src="js/functions/getdata.js"></script>
I tried to use requireJS too, but after I require what I need, It still says that what I require is not a function even if it is.
Your usage of browserify is wrong here.
You have to provide an output destination to browserify , and include that output file in your script tags, not the browserify/index.js file.
browserify index.js > bundle.js
Include this bundle.js in your html.

Categories

Resources