Im using webpack to generate a bundle file, namely app.bundle.js. It seems to be the case that in each seperate js file I need to import the modules it will use.
I've been trying to wrap my head around this but it eludes me hard. The way i understand the bundling process is, put simplified: it takes all the files you've specified and merges them into one big output file.
That should mean that a class is declared ONCE in that big file and that should be enough to serve as a reference for all the others. Why do i need to import it again and again and again when it should simply just be there at the top of the bundle file being availabe for every other piece of code written thereafter?
PS ( A simple example )
I've got the following files:
A.js
class A {
doIt(){
console.log(this);
}
}
B.js:
import {A} from "a.js";
class B extends A {
}
main.js:
import {A} from "a.js"
import {B} from "b.js"
To use B in main.js i NEED to import A as well. And if A had another subclass i'd need to import that too. This, to me, looks insane, to the point that i'd prefer to afix everything on window.
If anyone knows, please help me understand what im missing.
so if we have:
// sum.js
var sum = function (a, b) {
return a + b;};
// multiply.js
// slightly contrived here - we're going to repeatedly sum to multiply, to illustrate dependency
// interaction
var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};
// index.js
- our application logic
var totalMultiply = multiply(5, 3);
var totalSum = sum(5, 3);
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);
// index.html
- our entry point to our application
<html>
<head>
<script src="src/sum.js"></script>
<script src="src/multiply.js"></script>
<script src="src/index.js"></script>
</head>
</html>
the output of this would be:
Product of 5 and 3 = 15
index.js:17 Sum of 5 and 3 = 8
bundle file
,meaning that only one dependency would need to be downloaded. 2- Making Dependencies Available, And Linking Them
// sum.js
var sum = function (a, b) {
return a + b;
};
module.exports = sum;
// multiply.js
var sum = require('./sum');
var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};
module.exports = multiply;
// index.js
- our application logic
var multiply = require('./multiply');
var sum = require('./sum');
var totalMultiply = multiply(5, 3);
var totalSum = sum(5, 3);
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);
that is the whole point, you need to tell webpack which modules you need them to communicate and share data with each other. As in webpack Each module has a smaller surface area than a full program, making verification, debugging, and testing trivial. Well-written modules provide solid abstractions and encapsulation boundaries, so that each module has a coherent design and a clear purpose within the overall application.
Notice i wouldn't recommend exposing libraries or modules as global unless you really do need it, ie the point of a module system is to explicitly declare dependencies.
Example: Make $ and jQuery available in every module without writing require("jquery").
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
So:
// app.js
$.ajax(...);
Is effectively transpiled into:
// app.js
require('jquery').ajax(...);
webpack will generate a code of loading of the specified module the same as it it does it for import or require.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.