Pattern Lab是一个用于构建可重用的设计系统，并协助开发人员及设计人员协同工作的工具。而其官方提供的npm包@pattern-lab/live-server则是用于本地预览Pattern Lab网站的一个非常实用的工具。本文将通过详细的使用教程，为你简化Pattern Lab网站的开发流程，让你更好地了解模式库的开发。
安装@pattern-lab/live-server
npm install -g @pattern-lab/live-server
通过npm全局安装@pattern-lab/live-server，可以在本地网络环境下使用live-server命令。
本地预览Pattern Lab网站
跳转到Pattern Lab网站目录，并执行下面的命令：
live-server --open=public
使用@pattern-lab/live-server提供的更丰富的功能
-- -------------------- ---- ------- ------ ----------- ----------- -------------- ------------- ------------- ----------- -------------- --------------- ------------------- --------------------- ------------- -------- --------------- ------- --------- ----- - ---- ------ --- - ---------- ---- --- --- ---- ------------- -- -------- --- ---- -------- -------- --- --------------- -------- --- ------ ------- ---- ----------- --- --------- ------- ------- ------ --- ------ --- ---- -- ------ -- --------- ----- ------ --- ---- ------- -- ---- -- --------- -------- --------- -- --- ---- --- ------- --- ------- ----- --------- ---- -- ----- -- ----- --- ------- --------- ---- --- -------- ----- --------- ---- -- ---- -------- -- ------ --------- ----------------- --- ------------ --- ----- ---- -- ----- --------- ------------- ------- ----- - --------- -- - ------ ------------------------------------ ---- ----- ----------- -- -------------- -- --- ------- ------ ---- -- --- ------ --------- ------------- ------ ------ ---- --- --- --------------------------- ------ --------- ------ ------- ------ ------ --- ---- ------- - ---- --- ----- ---- -- -------- ------- --- -------- -------- -- ---- --- -- --------- ----- ------- ---- ---- ------------------------------------ -- ----- --- -------- -------- -- --- ------- ---------- ----- ----- --- ------ ------- ------------------------- ------- --- -- ------ ----展开代码
说明：
- --port: live-server默认的端口号为8080，若要修改请使用该参数
- --host: live-server默认绑定到0.0.0.0，允许任何可访问网络地址的用户都可以使用你预览的内容。若绑定到localhost，只有该主机用户可以在浏览器中访问。
- --no-open: 在命令中加入--no-open，live-server就不会在浏览器中自动打开正在预览的页面了
- --watch: 使用逗号分隔符添加要监控的目录/文件，并将其包含在引号内
- --ignore: 忽略特定的目录或文件，会根据任何包括node_modules的识别文件自动添加到忽略列表中
- --entry-file: 指定某一个特定的HTML作为项目的入口点，而不是默认的index.html
- **--mount：**在浏览器中启用Web服务器上的路径别名。使用该参数可以将特定的文档路径别名并映射为本地文件/位置
- --cors: 启用CORS，即跨来源资源共享。设置为true会向Access-Control-Allow-Origin标头添加"*"
- --https: 启用HTTPS连接，需要提供SSL密钥和证书。使用该功能需要先生成证书并配置好其他必需的选项，但这些超出了本文的范畴。
- **--proxy：**将目标请求代理到指定的远程服务器
- **--spa：**处理单页应用程序的特殊URL
例如，若要使用http://localhost:8080预览文件，监听和重载文件更改，并使用8080端口和0.0.0.0绑定，可以执行：
live-server --port=8080 --host=0.0.0.0 --watch=public --no-open
示例代码
本示例文件夹下有一个简单的实例，可以通过下面的步骤进行查看：
- 打开终端并进入该示例的根目录
- 执行下面的命令：
live-server --open=public
<html> <head> <title>Hello World!</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
结论
使用@pattern-lab/live-server可以极大地简化Pattern Lab开发的流程，从而节省了时间。通过本文，相信读者能够更熟练地使用@pattern-lab/live-server，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/158186
