前面介绍了前端架构设计的交互概念篇和组件的简单介绍，下面介绍下我在开发过程中对于开发环境的思考：
Npm & Yarn
开始先说两个工具，npm和yarn，之前两年多的项目都是用npm管理包的，yarn是最近才用到。两者对于我来说作用差不多，参照的案例是哪个，我基本上就用了哪个。在实际执行中很可能会报些找不到某个安装包的问题，这都是正常现象，遇到问题，一般单独安装即可。
同时为了方便，可把npm源设置成taobao镜像。
npm config set registry https://registry.npm.taobao.orgnpm 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 builderWORKDIR /usr/src/app/USER rootCOPY package.json ./COPY yarn.lock ./ //如果是npm执行的过程，也一样。RUN yarnCOPY ./ ./// 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中的脚本即可。
以上，是我关于前端开发环境相关的思考总结，我相信，经过不懈的努力，我们都会在不断实践中成长。