简介
es-dev-server 是一个基于原生 Web Component 的开发服务器。它支持自定义路由、中间件、webpack 配置等一系列高级功能。当你需要快速搭建一个基于 Web Component 的项目时，它是一个非常不错的选择。
安装
你可以通过 npm 安装 es-dev-server：
--- ------- ------------- ----------
使用
你可以通过以下命令来启动 es-dev-server：
--- ------------- ------------- -------
在默认情况下，es-dev-server 会监听文件变化并在浏览器中自动刷新。同时，它还支持自定义路由和中间件。
自定义路由
你可以在 es-dev-server 的配置文件中指定路由，比如：
-- -----------------------
-------------- - -
------- -
-
----- ----
--------- ----- ---- -- -
----------------------------- -------------
----------------------------------------------------
--
--
--
--这个配置会把访问根路径的请求返回为一个简单的 HTML 页面。
中间件
es-dev-server 允许你使用中间件。比如，你可以使用这个功能来启用 CORS、添加自定义响应头等等。
-- -----------------------
-------------- - -
------------ -
----- ---- ----- -- -
-------------------------------------------- -----
-------
--
--
--webpack 配置
es-dev-server 默认使用了一个比较简单的 webpack 配置。但如果你需要高度定制化的配置，你也可以这样来使用：
-- -----------------------
-------------- - -
-------------- -
-- --- ------- --
--
--示例代码
下面是一个简单的 Web Component，它会把一个按钮渲染到页面上，并在按钮被点击时显示一段文本：
----- -------- - -----------------------------------
------------------ - -
-------
------ -
----------------- -----
------- -----
-------------- ----
------ ------
---------- -----
-------- --- -----
-
--------
------------- -----------
--
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
------------------------------------------------------------ -- -- -
----- - - ----------------------------
----------- - ---- ------- --- ---------
--------------------------
---
-
-
---------------------------------- ----------你可以把这个组件和上面提到的 es-dev-server 配合使用，来快速搭建一个 Web Component 的开发环境。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedca53b5cbfe1ea06123d8