1.6.0 • Published 4 years ago

@talentui/dev-server v1.6.0

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

talentui-dev-server

问题是什么

当进行前端开发的时候,前端在开发过程中的流程一般是这样的。

  • 首先打开线上任何一个环境,(开发,测试,线上)
  • 把前端资源服务器地址指向本地 (配host, 比如stnew03.beisen.com 127.0.01)
  • 启动项目的dev server,监测项目文件变化 ,然后提供静态资源服务,这里会依赖一个类似webpack-dev-server这样的微型web server, 端口常用的是3000,8000,8080等。 (启动项目的开发环境)
  • 安装IIS(windows)或者nginx(unix)的等web server,配置反向代理,这时启动的是80端口,对应线上环境的请求的端口。因为配置了host所有对应的请求会请求到web server上。(配置反向代理服务器)
  • 在web server上对请求文件的路径进行解析,重写(rewrite) 比如,我请求一个stnew03.beisen.com/xxx/xxx/func.min.x39fd0fdfd.js 返回给我的是重新请求127.0.0.1:3000/dist/func.js文件 (url rewrite)
  • 这时基本流程已经完成,打开线上环境,会发现请求真实返回结果是通过第3步服务提供的文件。此时本地开发环境配置基本完成。

这时有几个问题,

  1. 首先这个流程很麻烦,
  2. 需要的专业外的知识比较多,有的时候只能照着做不知道为啥
  3. 对环境依赖比较严重,换台电脑就,或者重装系统就得再来一遍,还不一定能成功。
  4. 如果项目换了,规则就需要调整,配置文件在哪,应该改哪里,这是个问题

反正就是不方便

那应该如何简化这个流程呢。

首先我们要看,整个流程中哪些是可以优化的,创建启动本地项目很简单,开发,测试环境的准备不需要前端怎么操作,比较麻烦的是配置nginx 或者IIS代理的过程。

  • 第一个比较麻烦的,就是安装,安装IIS或者nginx首先是相当前端专业知识之外的东西,我记得我入职的时候就是照着文档一步一步搞的。有的时候照着文档做完了,中间步骤出了错,完全不知道怎么处理,还得去问其他同时,费时费力。
  • 第二个比较麻烦的就是,一但开了代理,还得配置host,把比如xxx.com指向127.0.0.1, 这样一来所有的请求才能到达代理服务器,然后转发到本地项目上。当你不需要的时候还得记得关掉host,虽然有switchhost,还得请dns缓存
  • 开启了代理和配置了host之后,来回切切也没啥,突然你发现一个问题,就是访问的页面是个iframe,一个产品的页面嵌入了另外一个产品的页面,这是两个前端的项目,而你本地只启了其中一个,另外一个因为没有资源服务文件全部404了,导致啥也看不着。不得己只能换域名了。
  • 我可能只需要替换一个文件,nginx不合适,又得使用charles或者fiddler,但是mac下收费...,还得破解,其实我们的需求并不复杂,没那个必要啊。
  • 哎呀,我要去另外一个项目去支援两天,上面的步骤还得再来一遍......

所以,我们需要一个专门满足我开发需求的东西,不需要复杂的配置,不需要太重,切换起来要方便,不需要来回切host,不需要匹配的文件可以直接走线上,调试起来方便。

这些问题已困绕很久了...直到有一天,我们决定改变他。

首先,我们要清楚流程是什么,请看图。

1.6.0

4 years ago

1.5.0

4 years ago

1.4.1

4 years ago

1.4.0

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.1.0

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.1.0

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago