I'm using package datamaps installed with npm. This package is havily using d3 pacakge version 3.
And now I want to use d3js directly in my project, but version 5.
So I tried to do npm install d3.
But what I found is that inside node_modules d3 directory was overriden (from version 3 to version 5) and datamaps stop working correctly.
How can I handle this usecase? Maybe I should use not npm but some other package manager? Or I just missing something?
Related
I am new to the VUEJS and learning it by torrent.
The author use docs from old version https://ru.vuejs.org/v2/guide/components-custom-events.html
for example .sync was added only in 2.3.0 version
<text-document v-bind:title.sync="doc.title"></text-document>
Can I use specific version(like 2.2) of VUEJS with laravel project?
Laravel uses NPM (node package manager), and any module gets into node_modules directory.
Install Node.js.
Open terminal and cd into your project root.
Then just run:
npm install --save vue v2.3
Note that above may fail if there is a dependency conflict (and fixing that is out of the OP's scope).
So, it doesn't matter that you are new to Vue as long as you know enough to prepare Laravel (and can ensure it's package.json does not conflict).
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".
TL;DR: d3.js should be installed via npm, as should the typings. Accepted answer has details. I was new to Angular when I wrote this question. The npm process is the standard: for tree-shaking, package management, updating etc
I have an Angular 2 project (it's the Quick Start project for simplicity), and I'm importing d3.js version 4. There is no TypeScript definitions with d3, as it's javascript only.
In the index.html I add the lib:
<script src="https://d3js.org/d3.v4.min.js"></script>
In the typescript app.component.ts, I reference the d3.select().... and it works fine - draws a circle:
d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");
Visual Studio Code does not recognise d3 so I install the typings from DefinitelyTyped - the IDE then recognises d3, and I get code completion etc:
typings install dt~d3 --save --global
Now, I tried a second project, but went the npm route, npm install --save d3 and I can reference the d3.js via the node_modules in index.html using
<script src="node_modules/d3/build/d3.min.js"></script>
But, I do not see why I would use npm in this instance? I'm not using import statements for d3 in the component.ts files, and it works ok anyway. Maybe I'm missing something here?
As of now you have fundamentally the following two import-based options to utilize D3 version 4 (Always conditional on using TypeScript 2):
Option 1 (Use of Standard D3 bundle)
npm install --save d3 (The normal approach to installing the Standard D3 v4 Bundle)
npm install --save-dev #types/d3 (Installs the definitions for the Standard D3 v4 Bundle) You should use --save, if you are building a library to be used by other Angular 2 applications, so that the library consumer can develop with typing support)
Now you can use import * as d3 from 'd3', e.g. in the module which creates a singleton D3 service to be injected into components on an as needed basis.
Option 2 (Use only what you need)
npm install --save d3-selection d3-transition d3-shape d3-scale Install only the modules you need for your project
npm install --save-dev #types/d3-selection #types/d3-transition #types/d3-shape #types/d3-scale (Install the matching definitions. Again, use --save instead of --save-dev depending on your use case.)
For convenience, you can now bundle these modules in a barrel module d3-bundle.ts
e.g.
// d3-bundle.ts
export * from 'd3-selection';
export * from 'd3-transition';
export * from 'd3-shape';
export * from 'd3-scale';
Import from the bundle (using the appropriate relative path) to create a singleton D3 service i.e. import * as d3 from './d3-bundle'
The approach under Option 2 is essentially what d3-ng2-service does. It can also give you an idea on how to build your own D3 Service, if the published one is not right for. You can always suggest improvements to it, of course.
I will say that, using the import-based options with angular-cli has become a lost easier since it changed to Webpack 2 for module-loading/bundling.
Why can't I get this directly through bower install? I'm trying to follow a combination of https://www.airpair.com/javascript/integrating-stripe-into-angular-app and https://github.com/laurihy/angular-payments but so far it's not going smoothly in regard to installing angular-payments. What am I missing? I've tried different versions of:
bower install --save angular-payments#9643191f2359e18d543c4abf1581f91f6729445f
which is the latest hash. But I also tried it without the hash and also by declaring the latest version, 0.1.1.
The upcoming Sails.js 0.10 features custom generators. (at the time of writing it is currently # rc4)
There's a migration page on Sails github describing how wonderful generators are, but not so much how to go about installing them into your own application.
A few really interesting custom generators start to pop up:
sails-generate-auth
sails-generate-gulp-bower
The first one is available on npm. So it was a matter of npm install and generator was available in my app right away.
I wanted to try out the second one to replace Grunt with Gulp, but I couldn't install the generator.
Can anyone explain how to install custom generator and hook it up with Sails.js app?
You can install a sails-generator just like any other npm package:
npm install sails-generate-auth
The problem with sails-generate-gulp-bower is that it hasn't been released to npm yet.
You can trick npm by using the following url to install the latest version of it anyway.
npm install https://github.com/PaulAvery/sails-generate-gulp-bower/archive/master.tar.gz --save
But keep in mind that the author probably has his reason why he didn't release it.
I created generaters to use gulp with sails. https://github.com/Karnith/sails-generate-new-gulp
There are 4 in total that need to be used together with a .sailsrc file. They should be installed globally and then sails new can be used to create the app. Sails lift works also.