webpack
वेबपैक का उपयोग
खोज…
उपयोग CommonJS मॉड्यूल उदाहरण
फोल्डर बनाएं। इसे कमांड लाइन में खोलें। चलाएँ npm install webpack -g । 2 फ़ाइलें बनाएँ:
cats.js:
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
कमांड लाइन में चलाएँ: webpack ./app.js app.bundle.js
अब फ़ोल्डर में फ़ाइल app.bundle.js । आप इसे index.html पेज में शामिल कर सकते हैं, इसे ब्राउज़र में खोल सकते हैं और कंसोल में परिणाम देख सकते हैं।
लेकिन अधिक तेज़ तरीका कमांड लाइन में चलाया जाता है: node app.bundle.js और कंसोल में तुरंत परिणाम देखें:
['डेव', 'हेनरी', 'मार्था']
एएमडी मॉड्यूल उदाहरण का उपयोग करें
फोल्डर बनाएं। इसे कमांड लाइन में खोलें। चलाएँ npm install webpack -g । 2 फ़ाइलें बनाएँ:
cats.js:
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
कमांड लाइन में चलाएं:
webpack ./app.js app.bundle.js
अब फोल्डर में फाइल होगी: app.bundle.js ।
Index.html फ़ाइल बनाएँ:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
इसे ब्राउज़र में खोलें और कंसोल में परिणाम देखें:
['डेव', 'हेनरी', 'मार्था']
उपयोग ES6 (बैबल) मॉड्यूल उदाहरण
जैसा कि जुलाई 2016 में MDN में लिखा गया है:
यह सुविधा इस समय किसी भी ब्राउज़र में मूल रूप से लागू नहीं की गई है। यह कई ट्रांसपैरर्स में लागू किया जाता है, जैसे ट्रेसुर कंपाइलर, बैबेल या रोलअप।
तो यहाँ वेबपैक के लिए बेबल लोडर के साथ उदाहरण दिया गया है:
फोल्डर बनाएं। वहां package.json फ़ाइल जोड़ें:
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
कमांड लाइन में ओपन फोल्डर। Daud:
npm install।
2 फ़ाइलें बनाएँ:
बिल्लियाँ :
export var cats = ['dave', 'henry', 'martha'];
app.js :
import {cats} from "./cats.js";
console.log(cats);
बेबल-लोडर के उचित उपयोग के लिए webpack.config.js फ़ाइल को जोड़ा जाना चाहिए:
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
कमांड लाइन में चलाएं:
webpack ./app.js app.bundle.js
अब फोल्डर में फाइल होगी: app.bundle.js ।
Index.html फ़ाइल बनाएँ:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
इसे ब्राउज़र में खोलें और कंसोल में परिणाम देखें:
['डेव', 'हेनरी', 'मार्था']
उपयोग ES6 (टाइपस्क्रिप्ट) मॉड्यूल उदाहरण
जैसा कि जुलाई 2016 में [MDN] [1] में लिखा गया है:
यह सुविधा इस समय किसी भी ब्राउज़र में मूल रूप से लागू नहीं की गई है। यह कई ट्रांसपैरर्स में लागू किया जाता है, जैसे ट्रेसुर कंपाइलर, बैबेल या रोलअप।
इसलिए यहाँ वेबपैक के लिए टाइपस्क्रिप्ट लोडर के साथ उदाहरण दिया गया है:
//करने के लिए
इस लेख का सरलीकृत संस्करण बनाएँ: http://www.jbrantly.com/typescript-and-webpack/ बिना tsd और jquery के।