Should I install plotly.js or plotly.js-dist via npm? - javascript

There are two packages plotly.js and plotly.js-dist.
What is the difference between them and which one should I use?
Moreover on npmjs.org on plotly.js page it says in order to install plotly.js one have to run:
npm install plotly.js-dist
I mean, I can see that plotly.js is a project with many files, and that plotly.js-dist is a bundle, just one file. But I don't get why it is distributed like this.
Especially, that plotly.js-dist is not minified, and in plotly.js there is minified file, which I guess can be used in order to import this library to one's project.

These files are same. I checked and compared.
If you using npm + typescript(+Angular), I recommend to use option , npm install plotly.js-dist.
If you using npm(or not) + javascript, I recommend to use option 3 with plotly.min.js.
Don't mention minified or not. Because after bundling every module minified.
So, it's up to you which file need to see via developer tool while debugging.
Here is Quick start options.
Install with npm : npm install plotly.js-dist.
Ready-to-use plotly.js distributed bundle.
Contains trace modules, visit here
Use the plotly.js CDN hosted by Fastly.
Download the latest release : plotly.js or plotly.min.js. More info here.
It doesn't matter what you choose but it is different slightly how to bundle/deploy your project.
And using definition file. #types/plotly.js
For further information from here, check Bundle information section.
Also, if you work with angular? here is another option : angular-plotly.js.
This is my answer for your second phrase.
"plotly.js" is hard to set it up for bundling.
Here is what I've done with this and my goal was:
Working on angular2-seed with Angular 4.
Fully defined each type/interface.
Step 1. Install package.
npm install plotly.js-dist --save
npm install #types/plotly.js --save
npm install #types/d3 --save
Note: #types/d3 is dependency of #types/plotly.js. but if you don't need it, remove it from index.d.ts.
Step 2. rename folder to use definition file.
Rename folder "plotly.js" to "plotly.js-dist" in "node_modules/#types".

Related

Where to install DataTables in slim4 by Daniel Opitz

I purchased the eBooks by Daniel Opitz. I am on page 226 of the books because I want to implement data tables in my project. In the books it reads.
DataTables Setup
DataTables.net is a very flexible table plug-in for jQuery.
You have to setup jQuery for Webpack first.
To install the DataTables Core library, run:
npm install datatables.net
npm install datatables.net-dt
To install the DataTables Bootstrap 5 styles, run:
npm install datatables.net-bs5
npm install datatables.net-responsive-bs5
npm install datatables.net-select-bs5
Add a new webpack entry in webpack.config.js:
In my naivete, I can't figure out on my own where I should be running the npm install. I was hoping this would be the fastest route to get help.
I have enjoyed learning the skeleton that he published. Most things have been straight forward and not to hard to figure out. This one has me stumped.
I did some more searching looking for the package.json location.
https://odan.github.io/slim4-skeleton/frontend.html
https://odan.github.io/slim4-skeleton/directory-structure.html
I looked over the directory structure and still not obvious to me where the npm should be executed.
Most package managers work by using a configuration file found in the root directory for the tooling you're trying to use. Generally, the assumption is these go in the root of the project. For instance:
/composer.json # PHP's Composer
/package.json # Javascript's NPM
/requirements.txt # Python's PIP
These are typically created by the package manager:
composer init
npm init
pip freeze > requirements.txt
Here are a some articles that can help explain this process:
https://getcomposer.org/doc/01-basic-usage.md
https://docs.npmjs.com/creating-a-package-json-file
https://learnpython.com/blog/python-requirements-file/
I'll also note many package managers will use a lock file, which records what was the last resolved and installed packages. The files above, in other words, depict what should be, while the lock file depicts what was (last) installed.
Your lock file should be handled with care and committed to the your project's repo. When you remove it, you are telling that package manager to recalculate the installed packages list and you may have subtly different versions (leading to potential bugs).
/composer.lock
/package-lock.json

Why nodejs package on github has diffrence with the same package downloaded by npm commit?

I download nodejs package by commit: npm install -g package_name
But I find some package downloaded has diffrent files with ther same package on Github.Why?
A developer creates a package when he thinks the code is stable, and continues developing on future updates.
So github code is Work in Progress code for the next update, npm package is the latest stable version of the package.
In above case, if you want to see the npm package code in github look for the tag with the package version.
Also files in npm package can be compiled code while github contains the source code. Using .gitignore a developer can exclude compiled files from github repo and using .npmignore a developer can exclude source files from npm package (not often the case, but can be done)
So the reason for difference in code can be one of these.

Should I user meteor packages or copy js files?

There are many js libraries built by enthusiasts that are incredible. And some of them have found a place in atmospherejs (some of them migrated not by their autor). Should I use the original ones (js files) or add the meteor packages that are the meteor version of these libraries?
For example:
Sweet alert:
Meteor version by someone else
Original version by ther author
You can do both, if you take a look in usage you will find first one (meteor one) you need meteor to install it:
Usage
meteor add kevohagan:sweetalert
And second one you have a working plugin installable via bower or npm
Usage
Method 1: Install through bower:
$ bower install sweetalert
Method 2: Install through NPM:
$ npm install sweetalert
So, if it is not last option, you dont need to get manually any files.

What is the step-by-step procedure for installing any npm module with Aurelia CLI?

I wanted to install jquery and found instructions here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/4
I then wanted to install "moment.js" and found instructions here ( I am not using typescript) :
How to import Moment-Timezone with Aurelia/Typescript
To install both of these with the Aurelia CLI the procedure is to install the respective npm module and then to manually modify aurelia.json in some way so the app recognizes it.
In the case of moments the instructions then say to place an import at the top of app.js , but this is not the case for JQuery.
First off , is there any way the changes to aurelia.json can be automated ( like a regular node.js package.json) so I don't need to manually do it and second, how do I know what modifications I am expected to make to aurelia.json ( or app.js or any other file) for the module I want to install?
With a basic node.js app its pretty simple , just npm install. With Aurelia its much more confusing.
Edit: There is also JSPM which I've read is used for front end libraries like the ones I mentioned above. However, the links with instructions for installation that I posted are not using JSPM.
Edit
I found some of the answers here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6
The CLI is still under development. I think the automatic adding of a package might some day be included in the CLI itself, for example with an install command.
The extra registration is required to register the package correctly for usage with RequireJS (http://requirejs.org/). And if the plugin exists of more than just 1 file, this registration is a bit more complex then just adding the name of the plugin.
There is an experimental CLI task here https://github.com/martonsagi/aurelia-cli-pacman that will do the automation for you.
Which can be installed by running:
npm install aurelia-cli-pacman -D
The above will install the package manager and register/ include itself in the tasks in your current project (be sure to run it with install, because npm won't run the post install script if you run it the i shorthand). Next, you can run the following command to install an extension:
npm i aurelia-interactjs -S
au pacman i aurelia-interactjs
The only downside for many might be that currently there aren't that many registry entries, but I think the author of the package would be very happy if you help him out by creating a pull to extend the registry. Would take you some time to figure out what would be the correct install/ import settings, but you will help out someone else and make them happy when they hit the same problem you experience :-).
JSPM has a same sort of issue around this, only is more matured/ the registry is bigger and/ or authors added specific information for JSPM installations to their package.json. For example: To install the above plugin with JSPM it will use the following highlighted section https://github.com/eriklieben/aurelia-interactjs/blob/master/package.json#L72,L86. The same is currently not possible with aurelia-cli, because the installation is done by NPM instead of through JSPM that redirects it to NPM.
If the author of the plugin didn't specify the JSPM section in the package.json, you would most likely and up with the same sort of issues. JSPM has a similar registry (https://github.com/jspm/registry/tree/master/package-overrides/npm) as aurelia-cli-pacman.

bower installs several files. why and how can I change it?

I am using bower to install dependencies for my project(I know there is yeoman but I am using bower). After setting up component.json file, when I do bower install it installs dependencies to correct directory but it install lots of other unnecessary files with it too. Now I want bower to install the specific file which is needed for example jquery.js, backbone.js and underscore.js and nothing else. How can I do it with bower?
I recently wrote up a possible solution to this problem and will highlight the main points below.
If you know you want a specific file from a particular package, it is easy enough to tell bower to only grab that file. For instance, with normalize.css, the only file that I care about is, well, normalize.css. So instead of typing:
bower install --save normalize-css
I can be more specific and tell bower to just download the css file:
bower install --save https://raw.github.com/necolas/normalize.css/master/normalize.css
That, of course, will always grab the latest version of normalize from the repository's master branch when bower install is invoked for your project. If, however, I want to make sure I always get the 3.0.0 version of normalize, then I can dig through the releases/history to find the appropriate URL and viola:
bower install --save http://necolas.github.io/normalize.css/3.0.0/normalize.css
You can check out bower-installer.
bower list --path usually tells about the main js file in the package, which bower-installer conveniently picks up and exports only those files to your asset directories. You can then use this directory instead and ignore the bower_components dir.
It's up to the package authors to specify what files to exclude from the package using the ignore property. For now just include the files you want in the your app/website and ignore the rest.

Categories