javascript - Finns det någon fördel med att installera d3.js via npm för ett Angular 2 TypeScript-projekt?

TL;DR: d3.js bör installeras via npm, och detsamma gäller typings. Accepterat svar har detaljer. Jag var ny på Angular när jag skrev denna fråga. npm-processen är standard: för tree-shaking, paketadministration, uppdatering etc.

Jag har ett Angular 2-projekt (det är Quick Start-projektet för enkelhetens skull), och jag importerar d3.js version 4. Det finns inga TypeScript-definitioner för d3, eftersom det är bara JavaScript.

I index.html lägger jag till biblioteket:

<script src="https://d3js.org/d3.v4.min.js"></script>

I typescript-filen app.component.ts refererar jag till d3.select().... och det fungerar bra - ritar en cirkel:

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 känner inte igen d3 så jag installerar typningarna från DefinitelyTyped - IDE:n känner då igen d3, och jag får kodkomplettering etc:

typings install dt~d3 --save --global

Nu provade jag ett andra projekt, men gick via npm-vägen, npm install --save d3 och jag kan referera till d3.js via node_modules i index.html med

<script src="node_modules/d3/build/d3.min.js"></script>

Men jag förstår inte varför jag skulle använda npm i det här fallet? Jag använder inte import-satser för d3 i component.ts-filerna, och det fungerar ändå bra. Kanske missar jag något här?

Svar #1

Från och med nu har du i grunden följande två import-baserade alternativ för att använda D3 version 4 (Alltid beroende av att använda TypeScript 2):

Alternativ 1 (Användning av standard D3-paket)

  • npm install --save d3 (Det normala sättet att installera Standard D3 v4-paketet)
  • npm install --save-dev @types/d3 (Installerar definitionerna för Standard D3 v4-paketet) Du bör använda --save om du bygger ett bibliotek som ska användas av andra Angular 2-applikationer, så att bibliotekets användare kan utveckla med typstöd)
  • Nu kan du använda import * as d3 from 'd3', t.ex. i modulen som skapar en singleton D3-tjänst som ska injiceras i komponenter vid behov.

Alternativ 2 (Använd bara det du behöver)

  • npm install --save d3-selection d3-transition d3-shape d3-scale Installera endast de moduler du behöver för ditt projekt
  • npm install --save-dev @types/d3-selection @types/d3-transition @types/d3-shape @types/d3-scale (Installera de matchande definitionerna. Använd återigen --save istället för --save-dev beroende på ditt användningsfall.)
  • För bekvämlighet kan du nu paketera dessa moduler i en barrel-modul d3-bundle.ts

t.ex.

// d3-bundle.ts    
export * from 'd3-selection';
export * from 'd3-transition';
export * from 'd3-shape';
export * from 'd3-scale';
  • Importera från paketet (använd den lämpliga relativa sökvägen) för att skapa en singleton D3-tjänst, t.ex. import * as d3 from './d3-bundle'

Tillvägagångssättet under alternativ 2 är i princip vad d3-ng2-service gör. Det kan också ge dig en idé om hur du kan bygga din egen D3-tjänst, om den publicerade inte är rätt för dig. Du kan naturligtvis alltid föreslå förbättringar till den.

Jag vill säga att det har blivit mycket lättare att använda de importbaserade alternativen med angular-cli sedan det bytte till Webpack 2 för modul-laddning/buntning.

Relaterade artiklar