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.
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.
So I've been creating my own npm package and using webpack to bundle the code into one file.
I've seen similar questions asked before such as this one.
Packages index.js
When I bundle this code using webpack and set the package.json "main" to the compiled code,I dont get any intellisense when importing (no intellisense).
However when setting the package.json "main" to the index.js and importing the package I get intellisense (intellisense).
My questions are:
What are the possible fixes?
Is there an easy way to fix this without declaring the types of each function that is exported (possibly a setting in webpack.config.js)?
If there is no easy way to fix this is there a bundler that does this automatically that I can switch to.
In a web project using yarn as package manager and parcel as bundler, I want to let Parcel transpile Transcrypt (Python) files to Javascript.
For this I installed parcel-plugin-transcrypt. But now when I bundle the project via parcel serve I get the following error:
Cannot find module 'parcel-bundler/src/Logger
Googling shows that this seems to be some version issue other plugins have encountered too. However I could not find a solution for parcel-plugin-transcrypt.
Any way to fix this?
The plugin for Transcrypt references files that have been refactored in newer versions of the bundler. To get it to work you need to add three missing files required by the build process. It's a work around for an underlying issue, but it fixes the problem for now. I use 3 wget commands to pull the files out of github and put them into the appropriate node_modules folder. So after installing parcel-bundler with npm, from the root folder of the project I run these:
wget -P ./node_modules/parcel-bundler/src/ https://raw.githubusercontent.com/parcel-bundler/parcel/b1e6d59cc44489f20013fa3171e09788978d7aed/packages/core/parcel-bundler/src/Logger.js
wget -P ./node_modules/parcel-bundler/src/utils/ https://raw.githubusercontent.com/parcel-bundler/parcel/b1e6d59cc44489f20013fa3171e09788978d7aed/packages/core/parcel-bundler/src/utils/prettyError.js
wget -P ./node_modules/parcel-bundler/src/utils/ https://raw.githubusercontent.com/parcel-bundler/parcel/b1e6d59cc44489f20013fa3171e09788978d7aed/packages/core/parcel-bundler/src/utils/emoji.js
Hello I have been trying to install the npm package 'math-simple-integral'
and I am having trouble making it work, I originally used math.js and just used the cdnjs script src
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.1.0/math.min.js"></script>
and that worked for all of the functions that I needed but it didnt work for the math.integral() function that I am looking for I am not sure how to install 'npm install mathjs-simple-integral' and I am wondering if there is a script src that I can use like I did for the math.js.
any assistance would be appreciated.
thank you
In order to run npm install, you must first install NodeJS.
You then run npm install mathjs-simple-integral from the command line at the root folder of your project. This will create a node_modules folder which contains the JavaScript files you want to link to.
Then you would reference it with something like:
<script src="node_modules/mathjs-simple-integral/index.js"></script>
However, you'd probably want to use something like Gulp, Bower or WebPack to include your dependencies.
Then you can simply reference it by importing it to math:
math.import(require('mathjs-simple-integral'));
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.