webpack
Utilizzo del Webpack
Ricerca…
Esempio di moduli CommonJS di utilizzo
Creare una cartella. Aprilo nella riga di comando. Esegui npm install webpack -g . Crea 2 file:
cats.js:
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
Esegui nella riga di comando: webpack ./app.js app.bundle.js
Ora nella cartella sarà presente il file app.bundle.js . Puoi includerlo nella pagina index.html, aprirlo nel browser e vedere i risultati nella console.
Ma il modo più veloce è eseguito in linea di comando: node app.bundle.js e vedere immediatamente i risultati nella console:
['dave', 'henry', 'martha']
Esempio di utilizzo dei moduli AMD
Creare una cartella. Aprilo nella riga di comando. Esegui npm install webpack -g . Crea 2 file:
cats.js:
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
Esegui nella riga di comando:
webpack ./app.js app.bundle.js
Ora nella cartella sarà presente il file: app.bundle.js .
Crea il file index.html:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Aprilo nel browser e vedi i risultati nella console:
['dave', 'henry', 'martha']
Esempio di utilizzo dei moduli ES6 (Babel)
come scritto in MDN a luglio 2016:
Questa funzione non è implementata in nessun browser in questo momento. È implementato in molti transpilers, come il Traceur Compiler, Babel o Rollup.
Quindi ecco un esempio di Babel loader per Webpack:
Creare una cartella. Aggiungi qui il file package.json:
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
Apri la cartella nella riga di comando. Correre:
npm install.
Crea 2 file:
cats.js :
export var cats = ['dave', 'henry', 'martha'];
app.js :
import {cats} from "./cats.js";
console.log(cats);
Per un corretto utilizzo di babel-loader dovrebbe essere aggiunto il file webpack.config.js :
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
Esegui nella riga di comando:
webpack ./app.js app.bundle.js
Ora nella cartella sarà presente il file: app.bundle.js .
Crea il file index.html :
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Aprilo nel browser e vedi i risultati nella console:
['dave', 'henry', 'martha']
Esempio di utilizzo dei moduli ES6 (dattiloscritto)
come scritto in [MDN] [1] a luglio 2016:
Questa funzione non è implementata in nessun browser in questo momento. È implementato in molti transpilers, come il Traceur Compiler, Babel o Rollup.
Quindi ecco un esempio con il caricatore di Typescript per Webpack:
//FARE
Crea una versione semplificata di questo articolo: http://www.jbrantly.com/typescript-and-webpack/ senza tsd e jquery.