npm 包 whiterabbit 使用教程

阅读时长 4 分钟读完

介绍

whiterabbit 是一个基于 webpack4 和 webpack-dev-server 的前端开发开箱即用脚手架,可以帮助开发者快速搭建前端项目并进行开发、测试、打包等一系列工作。它支持自动化部署,可以大大提高开发效率和代码质量,减少工作量。

安装 whiterabbit

通过 npm 安装 whiterabbit 非常简单:

安装完成后,在 package.json 中添加以下脚本:

此外,为了保证正常运行,还需要在项目根目录添加 whiterabbit.config.js 配置文件,在其中添加如下内容:

-- -------------------- ---- -------
-------------- - -
  ------ -----------------
  ------- -
    ----- -------------------- --------
    --------- ----------
  --
  ---------- -
    ------------ ---------
    ----- ----
  -
--

使用 whiterabbit

开发环境

在开发环境下启动 whiterabbit,只需要在终端输入以下命令:

whiterabbit 会自动在浏览器中打开 http://localhost:3000/ 页面,并开始监听文件的变更。当文件发生变更时,它会自动重新编译、打包并刷新浏览器,方便开发者快速预览修改后的效果。

生产环境

在打包项目时,只需要在终端输入以下命令:

这会生成一个 dist 文件夹,其中包含 build 后的项目文件。这时就可以将 dist 文件夹部署到服务器上了。

自定义配置

如果需要自定义配置,可以在 whiterabbit.config.js 中对配置进行修改。比如:

-- -------------------- ---- -------
-------------- - -
  ------ -
    ---- -----------------
    ------- ----------
  --
  ------- -
    ----- -------------------- --------
    --------- -----------------------
  --
  -------- -
    --- -------------------
      ------ --- -----
      --------- ----------------
    ---
    --- -----------------------------
    --- -------------------------------
  --
  ------------- -
    ------------- ---------
    ------------ -
      ------------ -
        ------- -
          ----- -------------------------
          ----- ----------
          ------- -----
        -
      -
    -
  -
-

上述配置实现了以下功能:

  • 使用 Lodash 库。
  • 为 chunk 命名。
  • 自动清理文件。
  • 优化打包后的文件体积。

总结

使用 whiterabbit 可以帮助前端工程师快速搭建前端项目,并进行开发、测试、打包等一系列工作,节省了宝贵的开发时间,提高了效率。同时,它支持定制化配置,可以满足各种需求。如果你正在开发一个前端项目,建议尝试使用 whiterabbit。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdf21

纠错
反馈