在前端开发中,我们经常需要使用构建工具来打包和编译我们的代码。Rollup是一款比较流行的JavaScript模块打包器,它可以让我们打包出来的代码更小、更快、更高效。而@talmobi/rollup-watch是一款基于Rollup的自动构建工具,可以帮助我们实时监测代码的改变并自动打包。
本篇文章将详细介绍如何使用@talmobi/rollup-watch包来实现自动化构建,同时还会给出一些代码实例。
安装@talmobi/rollup-watch
在使用@talmobi/rollup-watch之前,需要先安装它。使用npm即可:
--- ------- --------------------- ----------
配置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文件中写入如下代码:
----- ----- - ------ -- - ------------------ ---------- -- ----- ----- - -- -- - ---------------------- -- ------------ --------
接着运行如下命令:
------ -- ------------------------
此时,我们会看到如下输出结果:
----------- ------- -------------- ---- ------ -- ----
此时,在我们修改了index.js中的代码后,@talmobi/rollup-watch会自动进行构建,我们无需手动再次运行上述rollup命令。
总结
通过本篇文章的介绍,我们了解了如何使用@talmobi/rollup-watch实现代码的自动构建。我们可以在src目录下对代码进行修改,而在开发过程中,页面中的更新将会自动进行。
如果你对Rollup还不熟悉,可以查看Rollup官方网站了解更多内容。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055c1281e8991b448d9b40