简介
作为前端开发人员，我们必须不断地追求更高效、更快速的开发流程。这就要求我们使用一些优秀的自动化构建工具，幸运的是，SUI-Bundler提供了一个整合莫伊推荐的自动化流程工具，可以让我们从繁琐的手动配置中解放出来，让我们更加专注于业务，能够更快速的开发出应用。
在本文中，我们将会详细介绍如何使用@schibstedspain/sui-bundler。
安装
我们对于使用npm作为依赖管理工具，可以通过以下命令进行安装
--- ------- ---------------------------
配置
我们在使用sui-bundler的过程中，只需要进行一些配置就可以完成整个构建过程。
首先，我们需要在项目的根目录下新建一个.sui-bundler.js的配置文件，来告诉sui-bundler我们的项目结构以及其他相关配置，具体配置如下：
----- ---- - ----------------
----- ------ - -
-------- ----------------------- -------
------ -
----- -------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
--
-------------- - -------在这个配置文件中，我们需要指定我们项目的上下文路径context，它将会用于之后的构建过程中。我们还需要指定一个入口文件，它将会是我们应用的入口，这里我们指定了一个名为main.js的入口文件，入口文件的路径相对于我们之前指定的上下文路径，再来看一下我们之前配置文件中关于入口文件的配置。
------ - ----- ------------- -
此时，你可能会好奇我们在之前指定的入口文件为main.js，但是我们的配置文件中是index.js，是不是有些不对劲？实际上，在实际的使用中，我们并不需要将我们的入口文件命名为main.js。在这里，我们可以指定main作为我们的打包后的文件名字，而你可以随意指定入口文件的名称，比如你可以将你的入口文件命名为app.js、index.js等等。
接下来，我们需要指定输出的路径和输出的文件名。在这里，我们指定的输出路径为dist，输出文件的文件名为[name].bundle.js，这里的[name]表示入口文件对应的名字，也就是我们之前的main，其中还可以使用其他选项占位符，比如[hash]、[chunkhash]等等。
运行
经过我们的配置之后，就可以开始进行构建了。在使用npm的情况下，可以在命令行输入以下命令来构建
--- --- -----
如果你想要在命令行中看到更多信息，可以在package.json文件的scripts中添加一些参数，比如：
---------- - -------- ------------ ------------ -------------- ------- ---------- --
这里，我们增加了--watch和--verbose两个参数。--watch表示监控我们代码的变化，并自动进行相关的构建，而--verbose表示输出更加详细的信息。
示例代码
这里提供一个示例，在这个示例中，我们建立了一个简单的应用，当用户点击按钮的时候，将会在控制台中输出一条信息。
--------- ----- ----- ---------- ------ ---------------------- ------- ------ ---- --------------- ------- ------------------------- ------- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --- ------- --------------- -
----------- - -- -- -
------------------ ---------
--
-------- -
------ -
-----
---------- -----------
------- ------------------------------ ---------------
------
--
-
-
-------------------- --- --------------------------------总结
由于篇幅所限，本文并未对sui-bundler进行一一详细讲解，希望读者能够在实际的使用中发现并掌握更多的功能。在实际的使用中，sui-bundler会帮助我们更高效地进行构建，减少手动配置的繁琐，让我们专注于业务的实现。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600560be81e8991b448df057