webpack
Gebruik van Webpack
Zoeken…
Gebruik CommonJS modules voorbeeld
Map aanmaken. Open het op de opdrachtregel. Voer npm install webpack -g . Maak 2 bestanden:
cats.js:
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
Uitvoeren op opdrachtregel: webpack ./app.js app.bundle.js
Nu in map zal het bestand app.bundle.js . U kunt het opnemen op de index.html-pagina, het openen in de browser en het resultaat bekijken in de console.
Maar een snellere manier wordt uitgevoerd op de opdrachtregel: node app.bundle.js en zie het resultaat onmiddellijk in de console:
['dave', 'henry', 'martha']
Gebruik AMD-modules voorbeeld
Map aanmaken. Open het op de opdrachtregel. Voer npm install webpack -g . Maak 2 bestanden:
cats.js:
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
Uitvoeren op opdrachtregel:
webpack ./app.js app.bundle.js
Nu in de map zal het bestand zijn: app.bundle.js .
Maak index.html-bestand:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Open het in de browser en bekijk het resultaat in de console:
['dave', 'henry', 'martha']
Gebruik ES6 (Babel) modules voorbeeld
zoals geschreven in MDN in juli 2016:
Deze functie is momenteel niet in alle browsers geïmplementeerd. Het is geïmplementeerd in veel transpilers, zoals de Traceur Compiler, Babel of Rollup.
Dus hier is een voorbeeld met Babel loader voor Webpack:
Map aanmaken. Voeg het pakket.json-bestand toe:
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
Open map op opdrachtregel. Rennen:
npm install.
Maak 2 bestanden:
cats.js :
export var cats = ['dave', 'henry', 'martha'];
app.js :
import {cats} from "./cats.js";
console.log(cats);
Voor het juiste gebruik van babel-loader moet het webpack.config.js- bestand worden toegevoegd:
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
Uitvoeren op opdrachtregel:
webpack ./app.js app.bundle.js
Nu in de map zal het bestand zijn: app.bundle.js .
Maak index.html- bestand:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Open het in de browser en bekijk het resultaat in de console:
['dave', 'henry', 'martha']
Gebruik ES6 (Typescript) modules voorbeeld
zoals geschreven in [MDN] [1] in juli 2016:
Deze functie is momenteel niet in alle browsers geïmplementeerd. Het is geïmplementeerd in veel transpilers, zoals de Traceur Compiler, Babel of Rollup.
Dus hier is een voorbeeld met Typescript loader voor Webpack:
//TE DOEN
Maak een vereenvoudigde versie van dit artikel: http://www.jbrantly.com/typescript-and-webpack/ zonder tsd en jquery.