npm 包 @erect/server 使用教程

阅读时长 4 分钟读完

简介

@erect/server 是一种快速搭建前端开发服务器的 npm 包,可以通过简单的配置快速搭建一个本地开发服务器,支持自动刷新、HMR 等功能,适用于前端开发、模板制作、静态页面展示等场景。

安装

可以通过 npmyarn 安装:

使用

下面是一个简单的示例,来实现一个供本地开发使用的服务器:

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

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

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

上面的代码中,我们首先引入了 @erect/server,然后配置了一些参数,最后调用 erectServer(config) 开启了一个本地服务器。

  • port: 服务器监听的端口号,默认 8080。
  • host: 服务器监听的地址,默认 127.0.0.1。
  • open: 是否在启动服务器后自动打开浏览器,默认为 false
  • staticDirectory: 静态文件(例如 HTML、CSS、JS 等)所在的目录,默认为 public
  • proxy: 需要反向代理的 API,可以配置多个。例如上面的配置表示,所有以 /api 开头的请求将会转发到 http://localhost:8080 地址,注意需要配置 changeOrigin 接口防止跨域问题。

npm scripts

日常开发中,我们通常会将一些常用的命令写入 package.json 文件的 scripts 字段中,然后通过 npm run 来运行。因此,我们也可以在 scripts 中配置一些命令,实现启动服务器、构建打包等操作。

例如以下示例,我们可以在 scripts 中添加如下代码:

这样,就可以通过以下命令来启动服务器或构建打包:

注意,当我们只使用 npm startnpm run 时,会在当前目录下查找是否存在 node_modules/.bin 目录,并在其中查找命令是否存在。因此在以上示例中,命令 erect 将会被解析为 node_modules/.bin/erect

高级配置

当然,@erect/server 还支持更多高级的配置,可以通过 plugin 字段来扩展各种功能。

例如,如果需要开启 Sass 或 Less 文件的编译,可以配置 plugin: ["css"]plugin: ["less"],在服务器启动时会自动对指定的文件进行编译。

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

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

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

更多高级配置,可以参考官方文档。

总结

@erect/server 是一款十分实用的前端开发服务器,尤其适用于开发、模板制作、静态页面展示等场景。通过简单的配置,就可以快速搭建起一个本地开发服务器。相信读者们在实际开发中使用 @erect/server 时能够有所收获,提高自己的开发效率。

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