一个后端程序员的前端开发实践-环境篇

前面介绍了前端架构设计的交互概念篇和组件的简单介绍，下面介绍下我在开发过程中对于开发环境的思考：

Npm & Yarn

开始先说两个工具，npm和yarn，之前两年多的项目都是用npm管理包的，yarn是最近才用到。两者对于我来说作用差不多，参照的案例是哪个，我基本上就用了哪个。在实际执行中很可能会报些找不到某个安装包的问题，这都是正常现象，遇到问题，一般单独安装即可。

同时为了方便，可把npm源设置成taobao镜像。

npm config set registry https://registry.npm.taobao.org
npm config get registry // 查看> https://registry.npm.taobao.org/

开发环境

说到开发环境，不得不提到开发方式。

在开发环境中，可以在本地以nodejs为依托运行，在2018年左右的时候，我拿到的例子都是自己mock数据的。不过，我没有采取过这种方式，我更愿意在后端api接口层写一些假的数据返回。然后在开发前端。或者前后端一起开发，这也许是后端程序员的优势吧。

session和跨域

上面这种开发方式主要涉及两个问题，session登录问题和跨域：

1. 登录身份的校验，主要是在后端里面进行区别。有几种解决方案: 如后端中间件部分根据环境变量判断是否是开发环境进行处理：如果是开发环境则直接指定一个用户身份进行接口调用。 

2. 跨域：对于前端项目的跨域问题，我们并没有在nginx层面处理，基本上是在php代码里头部处理的(其他语言同样适用)。

一般请求都是在返回的时候处理下头部信息，如以下代码：

当然，对于post请求，在正式的请求之前可能还会有个method=OPTION的请求，此时返回状态码=204即可，如：

c.AbortWithStatus(204)

如果是php/nginx的项目，与上述类似。当然在nginx层处理也是一种方式，而我更倾向于在代码中统一处理即可:

header('Access-Control-Allow-Origin:' . $_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Credentials: true');...

上线

因为接触的基本都是内部系统，所以前端是和后端一起部署的，即前端的制品文件index.html是作为后端的模版输出的。对于开发完成后前端的代码我会先上传到内部代码库上。然后在本地单独的目录下，下载需要上线的前端代码，安装包。

npm run build

用上述命令生成制品文件。制品文件一般包含index.html,  *.js, *.css。  

拷贝静态文件到相关的后端项目的目录。特别注意的是index.html的处理，不仅要拷贝文件(或者是里面的css和js的版本号--为了防止缓存，每次打包都随机生成)，有时还需要，加入写后端传递到模版的参数变量。

开发环境docker环境

下面以一个docker脚本为例，该脚本主要进行的是以node:12为基础镜像，然后进行拷贝文件 加载扩展包 

FROM node:12 as builder
WORKDIR /usr/src/app/USER root
COPY package.json ./COPY yarn.lock ./     //如果是npm执行的过程，也一样。RUN yarn
COPY ./ ./// CMD代表是在 docker run 的时候执行。CMD ["yarn", "start:no-mock"]]  // 暴露80端口EXPOSE 8000

注意在执行 docker run的时候，需要把外面的指定端口映射到里面的8000。

缺点

因依赖的库是在docker里面的，所以本地的IDE等会报一些错误，我还是愿意在本地下载依赖的扩展包，然后进行开发工作。

动态编译

为了在仿真环境上更快速的编译达到效果，我对脚本进行了改进，关键步骤如下，流程图如下：

1. 创建个dockerfile，主要是创建编译前端需要的环境，根据package.json加载需要的包。然后最后加上如下语句，即在docker run的时候会执行build_product.sh的内容：

2. 编写build_product.sh的内容，这个脚本主要完成如下工作：

  a. 跳转到指定的目录执行yarn build进行编译。

  b. 拷贝成品文件到指定的目录，如php项目的模版目录和静态文件目录：index.html 、*.css、 *.js。

  c. 如果index.html里面有后端语言需要填充的变量，需要对其进行处理。

3. 通过docker build生成镜像，然后把它pull到指定的镜像仓库里。

4. 根据镜像创建实例：docker run，当然，需要把你项目的一些目录映射到docker里面。因为后面还要清理，不要使用后台进程方式处理。所以不需要-d。当然执行完毕后，还需要在这里清理下docker 环境。

如docker stop，docker rm等命令。

5. 定时更新最新的代码机制，如有符合条件的特征文件更新，如后缀是.ts、.tsx的文件，则执行4中的脚本即可。

以上，是我关于前端开发环境相关的思考总结，我相信，经过不懈的努力，我们都会在不断实践中成长。

来源：oschina

链接：https://my.oschina.net/u/4326248/blog/4928532