在前端开发中，我们经常需要使用构建工具来打包和编译我们的代码。Rollup是一款比较流行的JavaScript模块打包器，它可以让我们打包出来的代码更小、更快、更高效。而@talmobi/rollup-watch是一款基于Rollup的自动构建工具，可以帮助我们实时监测代码的改变并自动打包。
本篇文章将详细介绍如何使用@talmobi/rollup-watch包来实现自动化构建，同时还会给出一些代码实例。
安装@talmobi/rollup-watch
在使用@talmobi/rollup-watch之前，需要先安装它。使用npm即可：
npm install @talmobi/rollup-watch --save-dev
配置rollup
在配置@talmobi/rollup-watch之前，我们需要先对Rollup进行简单的配置。在根目录下创建一个rollup.config.js文件，并进行如下配置：
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
------ ------- -
------ -----------------
------- -
----- -------------------
------- ----
--
-------- ----------
--这里我们将入口文件定义为./src/index.js，在输出文件中定义了一个/output/bundle.js的路径，而输出的格式定义为es。
同时，我们还使用了rollup-plugin-terser插件对打包后的文件进行压缩。
配置@talmobi/rollup-watch
接下来，我们需要进行@talmobi/rollup-watch的配置。
在根目录下创建一个rollup.watch.config.js的文件，并进行如下配置：
-- -------------------- ---- -------
------ ------ ---- ---------
------ - ------ - ---- -----------------------
------ ----- ---- ------------------------
------ ------ ---- ---------------------
------ ------- -
------ -------------
------- --------------
-------- -
---------
-------
-------
------ -
-------- ---------
-------- -----------------
-
--
-
-这里，我们首先将Rollup的配置导入到当前文件中，然后定义rollup的配置项。
接着，我们引入@talmobi/rollup-watch组件，并将rollup.watch配置传递进去，同时指定监测的目录为src，不包括在node_modules目录下的文件。
示例代码
最后，我们来看一个具体的实例代码。
在src/index.js文件中写入如下代码：
-- -------------------- ---- -------
----- ----- - ------ -- -
------------------ ----------
--
----- ----- - -- -- -
----------------------
--
------------
--------接着运行如下命令：
rollup -c ./rollup.watch.config.js
此时，我们会看到如下输出结果：
Watching... bundled dist/bundle.js [441 bytes] in 29ms
此时，在我们修改了index.js中的代码后，@talmobi/rollup-watch会自动进行构建，我们无需手动再次运行上述rollup命令。
总结
通过本篇文章的介绍，我们了解了如何使用@talmobi/rollup-watch实现代码的自动构建。我们可以在src目录下对代码进行修改，而在开发过程中，页面中的更新将会自动进行。
如果你对Rollup还不熟悉，可以查看Rollup官方网站了解更多内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c1281e8991b448d9b40