I'm just starting to experiment with Node.js and Object Oriented Programming in Javascript.
This is my node based project structure
This is my package.json file:
I'm trying to use lodash in my app.js file. For that, I'm trying to do :
import * as _ from "lodash";
but this gives me error:
I tried another approach first to import lodash using :
var _ = require('lodash');
But this also gave me an error:
I'm trying to understand what's the difference in the two imports(I think the 1st one is the way to do it in ES6 modules approach). Which one is used when. And why does it not work in my application? What is the correct way to use lodash in my application? I'm sure these are pretty basic questions but everywhere I'm looking, it shows one of the above two approaches to load lodash and they're not working for me.
For any javascript code that gets executed in the browser and requires lodash the easiest way to do it is just to have a <script> tag in your html before your code runs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
Then you don't need to require or import lodash in your app.js file. The example above loads lodash from an external CDN. To load it from your own application just change the src attribute to point to where your node.js app is serving the lodash library from.
If you want to use require or import statements in your client javascript code there are build tools and transpilers that replace the require or important statements in your source code to code that will work in the browser. This is saved into another file and then you run that file in your browser. Browserify, Webpack and Babel are some you might want to look into, but if you are just starting out you may want to do that sometime down the road when you are building more complex applications.
Related
So I've created a simple program using node.js and a couple of libraries using puppeteer and kijiji-scraper from npm and I want to run it on a webpage like Github pages. In the past, I've had success using a CDN to import the node library I needed to do so by following the instructions on the readme. But for these packages, there aren't any instructions for importing using CDN. Is it just not possible to do so or am I missing something?
Packages:
https://www.jsdelivr.com/package/npm/kijiji-scraper
https://www.npmjs.com/package/puppeteer
NodeJS and the web have fundamentally different moduling systems. You won't be able to import libraries written for Node in the web. If the libraries are pure JavaScript libraries (not relying on the standard library or native modules) or are browser-based libraries relying on the DOM, then you can use Browserify to compile the library's source code into a single file and include that on the web page with a <script>. Otherwise, you'll need to restructure your application around this limitation.
In your case however, it looks like Kijiji is a client-side library and Browserify will be your solution here.
You can come to this conclusion by skimming some of its source code. You'll notice that there's a require call in it. The require function doesn't exist on the DOM API and hence will throw the error you're getting.
The solution I would use in your case would be a) Grunt or Gulp or b) compiling the code and import them statically.
If you have a more complex build chain, I would suggest including the browserify stage in it. I would also not use the CDN based library, rather use the NPM library. The browserify stage will bundle the library and all required dependencies into a single file that can be used in HTML
<script src="/static/kijiji.js"></script>
<script src="/app/index.js"></script>
I'm not sure what your file structure looks like but you get the idea.
I have started to learn react and I am very confused with the concept of packages.
and why we can't just use a simple link as cdn and there is a module which i don't understand it and what's npm and why i have to use it with react
Not trying to give the definite answer here, but trying to explain the 3 terms as simple as I can:
A module is just a file containing lines of JavaScript code.
A library uses one or many modules to provide a set of features.
A package is a downloadable, versioned library. Think of someone putting it in a box and shipping it to you, so you can import it and use it in combination with your own code.
so I came with conclusion and hope you tell me if I get it right or not .
-Module : it is justba javascript file but it's different from normal script that it has its own scope so you have to use import or export to exchange information between modules.
-Library : it is a group of modules or scripts that it is responsible for the function you want .
-package : can be one or more libraries but it is also contain files that don't deal with the functionality but it's only role to make sure the libraries and functional file work properly .
like react package it is come with react library deals with the functionality and also has babel compiler to make browser read and understand react library.
It is very much possible to use a simple link such as a CDN. Many packages also have links available, such as material UI. However, it quickly becomes unmanageable to use CDN links when your project grows, and it can affect performance and load times of your site.
Npm stands for Node package manager. It handles packaging for Node, where it would not be suitable to use a simple link.
It turns out that it is possible to also use npm for web applications, by combining it with a bundler. The bundler (such as webpack) takes all of your modules (JavaScript files and npm packages) and bundles it together so that you get a single script which you can run in the browser.
I am looking at optimizing a work Angular project and we're currently looking at how we are using PrimeNG. The Tree Shaking section on Webpack's documentation (https://webpack.js.org/guides/tree-shaking/) says that it relies on the ES2015 module format to determine what code can be pruned away, since CommonJS cannot be statically analyzed.
So, I assume that the Angular compiler has the same limitation since it uses Webpack on the build process.
That being said, I was looking at PrimeNG's Setup documentation (https://www.primefaces.org/primeng/#/setup) and it claims it is distributed in CommonJS format.
Does this mean that we are forced to import the entirety of PrimeNG when we import a single module? Is there something we can do to only import what we need?
Lastly, is there a way to determine on my own project if we are importing the entirety of PrimeNG, or just what we need?
Thank you!
If you import from the deprecated 'primeng/primeng' then yes, whole UI suite is imported. Instead import from 'primeng/inputtext' or 'primeng/tabview' so that only what you need will end up in your bundle. More info at the following blog; https://www.primefaces.org/primeng-5-2-0-final-released/
Yes, you can determine if your bundle contains the whole primeng library by using a bundle analyzer tool. I always use webpack-bundle-analyzer.
I am trying to use a third party .js library in Angular 2 / Typescript application. There are some examples on the web (like using declare var libraryVar: any;) but nothing seems to work. Is there a one correct way to integrate a .js library into a Typescript / Angular2 ?
There are some examples on the web (like using declare var libraryVar: any;) but nothing seems to work. Is there a one correct way to integrate a .js library into a Typescript / Angular2
Perhaps you forgot to put the declare var libraryVar:any; in a vendor.d.ts file that has no root level import/exports.
More : https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html
The web is full of examples of typescript projects consuming 3rd party libraries.
Here is one of mine which uses arcgis-js-api.
And Here is one that uses openlayers.
In your case you would try this:
bower init
bower install node-uuid --save
tsd install uuid --save
Then setup your tsconfig.json file. I think Angular 2 uses systemjs so you'd want to set module="system" (see system) unless you have a reason not to.
I haven't had much luck with systemjs but you might need to do something like this to get it to load uuid or any other AMD modules:
window.define = System.amdDefine;
window.require = System.amdRequire;
See system-api for an explanation.
The best way I have found to use an external library is to create a variable for it at the top of your typescript and import the js. By doing so the variable will offer all the functions the library provides inside your TS without any extra work.
for example if you want to use moment.js to do some time computation.
add this to your ts file
var moment = require("./scripts/moment");
after that you can use the functions inside your typescript by directly using the variable
moment.fromNow("SOMEDATE");
I faced the exact problem couple of days ago and I saw this is a good fit, Another neat way is to create a typescript class with all the helpers and reference the typescript to your file and call the helpers within. Still experimenting on a solid pattern, but this would be the start point.
I have written a self contained angular js module using browserify in order to make use of the commonJS/Node style syntax.
The module works fantastic when tested by itself, so I then use gulp to minify and host that on GitHub.
I've then imported that into another app that is also using browserify. When I run browserify it seems to try and rebrowserify the module and causes no end of problems.
I believe this is because the module requires angular and jquery and qtip2. So it's obviously trying to re parse these.
Is there a standard to not parse modules, or is there a way to exclude the browserifying of the modules? Or is it best to not include things like angular and jquery within your modules? I was trying to make them perfectly stand alone, maybe that's unwise?
Many thanks!
I would suggest providing both options, if it is important for you to have a standalone version that includes angular. This will provide people using your code with a total of three ways of using your code: Using the standalone version, the version that only includes the module, and cloning the repository directly and including the source files as part their build process.
I generally use the third option, but people who don't have build processes will likely prefer the first or second.