为什么我每次都需要在webpack bundle中导入模块？ [英] Why do i need to import modules everytime in webpack bundle?
问题描述
我使用webpack生成一个包文件，即app.bundle.js。似乎是在每个单独的js文件中我需要导入它将使用的模块。
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.
这应该意味着class在该大文件中声明为ONCE，并且应足以作为所有其他文件的引用。为什么我需要一次又一次地导入它，当它应该只是在捆绑文件的顶部可用于其后写的每一段代码？
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（一个简单的例子）
P.S ( A simple example )
我有以下文件：
A.js < br>
A.js
class A {
doIt(){
console.log(this);
}
}
B.js：
B.js:
import {A} from "a.js";
class B extends A {
}
main.js：
main.js:
import {A} from "a.js"
import {B} from "b.js"
要在main.js中使用B我还需要导入A.如果A有另一个子类，我也需要导入它。对我来说，这看起来很疯狂，以至于我宁愿在窗户上提供所有内容。
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.
推荐答案
- Webpack获取您指定的所有文件并将它们合并为一个大输出文件来拉取在合适的时间，在正确的范围内的依赖模块。
所以，如果我们有：
// 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>
这个的输出是：
Product of 5 and 3 = 15
index.js:17 Sum of 5 and 3 = 8
- 如果我们在index.html中输入错误的订单，我们的应用程序将无效。如果index.js包含在其他任何依赖项之前，或者如果在multiply.js之后包含sum.js，我们将得到错误。这就是捆绑文件中的要点。
- Webpack可以将我们所有的依赖项拉入单个文件
捆绑文件，这意味着只有需要下载一个依赖项。 - If we get the order wrong in index.html our application won't work.If index.js is included before either of the other dependencies,or if sum.js is included after multiply.js we will get errors. That is the point from the bundle file.
- Webpack can pull all of our dependencies into a single file
bundle file,meaning that only one dependency would need to be downloaded. - CommonJS使用module.exports将函数或变量导出 - 或使其可用 - 到其他代码。它使用require然后拉入这些导出的值。
2-使依赖关系可用，并链接它们
2- Making Dependencies Available, And Linking Them
// sum.js
// sum.js
var sum = function (a, b) {
return a + b;
};
module.exports = sum;
// multiply.js
// 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
// 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);
- 请注意，我们已将sum和multiply都用于其他代码我们在multiple.js和index.js中引入了这些导出的函数。
- 请注意，我们的index.html现在只需要拉入一个文件--bund.js 。
- 我们可以公开我们想要的东西，并将其他代码保密。
- 我们还将网络电话从3（sum.js，multiply.js和index.js）减少到
a单一电话 - 这将有助于加快加载时间。 - ProvidePlugin：此插件使模块在每个模块中都可用作变量。只有在使用变量时才需要该模块。
这就是重点，您需要告诉webpack您需要哪些模块进行通信并相互共享数据。与webpack一样，每个模块的表面积都比完整程序小，这使得验证，调试和测试变得微不足道。编写良好的模块提供了可靠的抽象和封装边界，因此每个模块在整个应用程序中具有一致的设计和明确的目的。
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, i.e. the point of a module system is to explicitly declare dependencies.
示例：在每个模块中都可以使用$和jQuery而无需编写require（jquery ）。
Example: Make $ and jQuery available in every module without writing require("jquery").
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
所以：
// app.js
$.ajax(...);
有效地转化为：
// app.js
require('jquery').ajax(...);
webpack将生成指定模块的加载代码，与导入或导入时相同需要。
webpack will generate a code of loading of the specified module the same as it it does it for import or require.
- further read: Webpack ProvidePlugin: how not to write the import/require sheet at the beginning of module javascript
这篇关于为什么我每次都需要在webpack bundle中导入模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
