In che modo webpack e gulp si completano a vicenda?

Question

In che modo webpack e gulp si completano a vicenda?

#1 da (0 voti)

1

Ho iniziato con TypeScript 2.5 anni fa con Visual Studio e ASP.Net MVC. VS Web Essentials compilava i file ts su save e la libreria WebOptimizer li raggruppava in runtime in un ordine specifico. Fondamentalmente un disastro, una volta che il progetto era sufficientemente grande.

Di quanto ho dato un'occhiata al codice generato dal generatore di gulp angolare . Ne ho preso le parti migliori, ho aggiunto gulp al mio processo di compilazione e improvvisamente il compilatore TypeScripts si è preso cura di ordinare il mio JavaScript compilato. L'ultima versione di quel generatore utilizza webpack per compilare e raggruppare TypeScript. Questo permette di usare le importazioni in stile ES6, ... ed è grandioso, ma non hanno cambiato nulla.

Utilizzano ancora bower per le dipendenze dei client, anche se è possibile utilizzare npm e la compilazione dei fogli di stile avviene anche in gulp, anche se il webpack dovrebbe essere in grado di occuparsene. Ora, amo bower e il fatto che posso configurare tutti i passaggi, che dovrebbero accadere con i file. Mi sembra molto trasparente, rispetto alla magia nera del webpack. Posso dividere file diversi in librerie di fornitori e applicazioni e sapere sempre cosa ottengo.

D'altra parte, il webpack da solo potrebbe essere ottimo e più facile da usare per progetti più piccoli. C'è un esempio spaventoso (dal mio punto di vista) di codice che puoi compilare nel webpack:

style.css :

body {
    background: yellow;
}

entry.js :

require("!style!css!./style.css");
document.write(require("./content.js"));

Il file JavaScript generato contiene il CSS e lo aggiunge all'intestazione delle pagine. Mostra le funzionalità di webpacks, ma chi vorrebbe fare qualcosa del genere?

Quindi le domande:

Questo è generalmente un buon approccio? Perché non utilizzare npm anche per le librerie client?
In quale scenario è un buon approccio per raggruppare il contenuto CSS in file JavaScript? (Non riesco davvero a pensare a nessuno)
Perché utilizzare webpack in primo luogo? Ci sono ulteriori vantaggi rispetto ai moduli ES6, invece di ///<reference path="..." />

front-end build-system typescript bundling

posta peter 30.08.2015 - 23:56

fonte

1 risposta

Leggi altre domande sui tag front-end build-system typescript bundling

Combinazione di API Fitnesse, .NET e RESTful clone (serializzare) v. serializzare (clone)

score 0 · Answer 1

Webpack utilizza i caricatori per semplificare la conversione dei formati di file:

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

Gulp è più strong in molte cose che completano il Webpack. Ad esempio:

Gestione file statico

Gulp can handle static assets better than Webpack. The copy-webpack- plugin can also copy files from your source to your build folder but when it comes to watching file deletion or changes like overriding an image, gulp.watch is a safer bet.

Ambiente server

Webpack also comes with a local server environment via Webpack Dev Server but using BrowserSync has some features you might not want to miss:

CSS/HTML/image injection for non-app projects

Multiple device testing out of the box

Includes an admin panel for more control

Bandwidth throttling for speed and loading tests

Tempo di compilazione

As seen in this post on GitHub, SASS gets processed by node-sass much quicker than by Webpack's combination of sass-loader, css-loader and extract-text-webpack-plugin.

Convenienza

In Webpack, you have to import your CSS and SVG files for instance into JavaScript to process them which can be quite tricky and confusing sometimes. With Gulp, you don't need to adjust your workflow.

Riferimenti