Javascript Module Bundler 简要说明
Javascript 生态系统是一个狂野的世界。人类每次呼吸，都会向世界发布一个 JavaScript 库。当然，这是夸张的，但你几乎可以直接键入随机英文单词并在其后面添加“JS”，很可能你会找到一个包含该术语的 javascript 库。由此可见 Javascript 是多么流行。
一方面，这意味着 Javascript 拥有庞大的生态系统。你遇到的每一个问题，你都可以很容易地找到答案，或者至少你可以很容易地提出。但另一方面，它是如此巨大，以至于没有凡人能够理解所有这些。这变得非常令人头疼，尤其是当您比较类似的库时。
这也适用于 Javascript Module Bundler，因为有很多捆绑器，有自己的配置，有自己的术语。我们中没有多少人定期接触捆绑程序配置（包括我），并且从头开始设置自己的捆绑配置可能非常令人生畏。这是我对 Javascript Module Bundler 的简单理解。
什么是模块捆绑器
模块化编程的艺术是将应用程序代码分割成称为模块的小型独立可互换单元。它非常有用，通过遵循这种范例，随着代码库的增长，我们可以创建单独的函数和/或文件，而不是在已经拥挤的文件中添加更多行代码。
看看下面的代码
<html>
<head></head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="./components/a.js"></script>
<script type="text/javascript" src="./components/b.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
过去管理项目真的很痛苦。正如您在上面看到的，当我们想要添加新文件时，我们还需要更新 HTML 脚本。当我们想要更新依赖项、删除文件等时，这也适用。我们还必须注意很多事情（即脚本的顺序、命名冲突），并且随着代码变得越来越大，管理所有这些变得很乏味。这是模块捆绑器可能会有所帮助的情况之一。
模块捆绑器是一种开发工具，可将您的代码处理成一个代码包。它从提供的入口点遍历您的代码，构建依赖关系图，并根据配置生成输出文件。因此，本质上只需将您的应用程序代码转换为另一种形式即可。
至少涉及两个过程，即依赖解析和打包。依赖关系解析是在每个模块/文件之间创建关系图（称为依赖关系图）的过程。依赖关系图对于识别模块检索顺序并消除无法访问的模块/文件很有用。打包是将基于创建的依赖图和指定配置的所有内容打包为浏览器可执行文件的过程。在上述情况下，在上述代码库中的所有文件中，模块捆绑器仅生成一个文件。然后我们就可以插入main.js到 HTML 中。
<html>
<head></head>
<body>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
看到上述代码后可能想到的问题之一是“如果所有代码合并为一个，我们如何在浏览器中调试这段代码？”。答案是源图。源映射是一种可以帮助工具（即浏览器）重建缩小代码的文件。除了可执行代码之外，模块捆绑器还可以生成源映射。有了源映射，我们就可以像代码的原始结构一样在浏览器中调试代码。当然，如果我们不希望用户能够读取我们的代码，我们可以禁用它。
注意事项
正如我们之前讨论的，Javascript 有很多模块捆绑器。每个模块捆绑器都有自己独特的配置和术语。但它们有一个模式，这里有一些您需要注意的配置。
入口点
入口点指示捆绑程序应开始遍历代码以创建依赖关系图的位置。您可以指定一个或多个入口点。当您构建库（例如组件库）时，这非常有用，因为它没有特定的入口点。
// webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js',
};
// rollup.config.js
export default {
input: {
a: 'src/main-a.js',
'b/index': 'src/main-b.js'
}
};
输出
输出指定捆绑代码在处理后应放置在何处以及如何放置。命名、文件分割和格式是可以在此处确定的一些示例。
// webpack.config.js
module.exports = {
...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};
// rollup.config.js
...
export default {
...,
output: [
{
file: 'bundle.js',
format: 'es'
},
{
file: 'bundle.min.js',
format: 'es',
plugins: [terser()]
}
]
};
插件系统
模块捆绑器的伟大之处在于插件系统。模块捆绑器的主要功能就是很好的捆绑。如果我们想要一些高级功能，例如开发服务器、将 SCSS 转换为 CSS、填充新的 javascript 功能、丑化代码等，我们需要通过将适当的插件插入模块捆绑器的插件系统来添加该功能。
// webpack.config.js
...
module.exports = {
...,
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
},
],
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
};
// rollup.config.js
...
export default {
...,
plugins: [graphql()]
};
怪癖
其他任何内容都是特定于捆绑包的并改进功能。有些捆绑器非常固执己见（即parcel、vite），而其他捆绑器就像一张空白画布，需要您自己配置（即webpack）。了解这一点的最好方法是阅读官方文档。
结束语
如今，模块捆绑器对于应用程序开发非常重要。鼓励了解基本行为，但不需要了解一切。当然，深入理解是有好处的，但对于初学者来说，只需开始编码并一路询问即可。
- 点赞
- 收藏
- 关注作者
评论（0）