webpack
Korzystanie z pakietu Webpack
Szukaj…
Przykład użycia modułów CommonJS
Utwórz folder. Otwórz go w wierszu polecenia. Uruchom npm install webpack -g . Utwórz 2 pliki:
cats.js:
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
Uruchom w wierszu polecenia: webpack ./app.js app.bundle.js
Teraz w folderze będzie plik app.bundle.js . Możesz dołączyć go do strony index.html, otworzyć w przeglądarce i zobaczyć wynik w konsoli.
Ale szybszy sposób jest uruchamiany w wierszu polecenia: node app.bundle.js i natychmiast zobacz wynik w konsoli:
[„dave”, „henry”, „martha”]
Przykład użycia modułów AMD
Utwórz folder. Otwórz go w wierszu polecenia. Uruchom npm install webpack -g . Utwórz 2 pliki:
cats.js:
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
Uruchom w linii poleceń:
webpack ./app.js app.bundle.js
Teraz w folderze będzie plik: app.bundle.js .
Utwórz plik index.html:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Otwórz go w przeglądarce i zobacz wynik w konsoli:
[„dave”, „henry”, „martha”]
Przykład użycia modułów ES6 (Babel)
jak napisano w MDN w lipcu 2016 r .:
Ta funkcja nie jest obecnie zaimplementowana w żadnej przeglądarce natywnie. Jest zaimplementowany w wielu transpilerach, takich jak Traceur Compiler, Babel lub Rollup.
Oto przykład z modułem ładującym Babel dla Webpack:
Utwórz folder. Dodaj tam plik package.json:
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
Otwórz folder w linii poleceń. Biegać:
npm install.
Utwórz 2 pliki:
cats.js :
export var cats = ['dave', 'henry', 'martha'];
app.js :
import {cats} from "./cats.js";
console.log(cats);
Do poprawnego korzystania z modułu ładującego babel należy dodać plik webpack.config.js :
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
Uruchom w linii poleceń:
webpack ./app.js app.bundle.js
Teraz w folderze będzie plik: app.bundle.js .
Utwórz plik index.html :
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Otwórz go w przeglądarce i zobacz wynik w konsoli:
[„dave”, „henry”, „martha”]
Przykład użycia modułów ES6 (Typescript)
zgodnie z [MDN] [1] z lipca 2016 r .:
Ta funkcja nie jest obecnie zaimplementowana w żadnej przeglądarce natywnie. Jest zaimplementowany w wielu transpilerach, takich jak Traceur Compiler, Babel lub Rollup.
Oto przykład z modułem ładującym Typescript dla pakietu Webpack:
//DO ZROBIENIA
Utwórz uproszczoną wersję tego artykułu: http://www.jbrantly.com/typescript-and-webpack/ bez tsd i jquery.