什么是 module-bundler?
module-bundler 是用于打包 JavaScript 模块的 npm 包，它可以将多个 JavaScript 文件打包成一个文件，从而减少浏览器对服务器的请求次数，加快页面加载速度，提高用户体验。
安装
可以通过 npm 安装 module-bundler，使用以下命令：
--- ------- -------------- ----------
使用
配置文件
在使用 module-bundler 之前需要先创建配置文件，文件名可以自定义，我这里以 bundler.config.js 为例。
----- ---- - ----------------
-------------- - -
------ ----------------- -- ----
------- - -- --------
----- ----------------------- --------
--------- -----------
-
--在配置文件中，我们需要指定入口文件和打包后文件的信息。
使用命令行
在安装了 module-bundler 后，我们可以通过命令行使用它。打开命令行，输入以下命令：
-------------- -----------------
使用 Node.js API
我们也可以通过 Node.js API 使用 module-bundler，使用方法如下：
----- ------- - -------------------------- ----- ------ - -------------------------------------- ----- ------- - --- ---------------- -----------------
demo
在使用 module-bundler 见过，我们来创建一个简单的 demo。
在根目录下创建 src 文件夹，并在其中创建两个文件，分别命名为 index.js 和 hello.js，代码如下：
-- -------- ------ - -------- - ---- ------------- ------------------------------- -- -------- ------ -------- -------------- - ------ ------ --------- -
在根目录下创建 bundler.config.js 文件，代码如下：
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
-
--打开命令行，输入以下命令：
-------------- -----------------
然后在根目录下创建 index.html 文件，引入打包后的 bundle.js 文件，代码如下：
--------- -----
------
------
----- ----------------
-------------------
-------
------
------- --------------------------------
-------
-------打开 index.html 文件，可以在控制台中看到 hello world，说明打包成功。
总结
通过本文，我们了解了什么是 module-bundler，如何安装和使用，还创建了一个 demo，让大家更好的理解它的使用方法。使用 module-bundler 可以很好的解决 JavaScript 模块打包的问题，加快页面加载速度，提高用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/76642