简介：WEB工程学习的目标是让项目从“搭建-开发-部署”??更快更规范。本文使用的相关技术栈为ReatJS和NodeJS。首先，让我们了解什么是脚手架。所谓脚手架其实就是帮助我们快速搭建项目的工具。通常，我们只需要运行一条命令就可以帮助我们生成一个项目。让用户无需考虑项目的目录结构、单元测试、需要的依赖等繁琐的事情。那么我们来看看常用的脚手架：官方create-react-app全球流行的yoman公司使用cubecreate-react-app安装脚手架参考官方文章https://github.com/facebook/c...npmicreate-react-appnpxcreate-react-appmy-appcdmy-app项目结构my-app├──README.md├──node_modules├──package.json├──.gitignore├──public│├──favicon.ico│├──index.html│└──manifest.json└──src├──App.css├──App.js├──App.test.js├──index.css├──index.js├──logo.svg└──registerServiceWorker.js启动项目：npmstart提供快捷操作包括：npmstart启动项目npmtestruntestnpmrunbuildpackagecodenpmrunejectprojectwebpack,babel,eslint和其他依赖项被导出到项目中。无法回滚的一次性操作。eject后主要添加config和scripts目录，package.json中的依赖也全部释放。通过阅读eject的代码，我们可以发现yarnstart是一个使用WebpackDevServer独立启动的前端项目，方便了前后端项目的分离。而当我们需要调试前后端时，可以在package.json中添加（如果我们的后端在localhost;4000）proxy":"http://localhost:4000"PS:如果项目要使用TypeScript，可以测试https://github.com/wmonk/crea...脚手架提供了非常基础的前端代码，比较适合生成组件模板，YomanYeoman支持新建项目和添加模块到新项目，支持的语言也很丰富，有Web，JAVA，Python，C#....我在官方搜索了react相关的generators：然后使用如下命令安装：npminstall-gyonpminstall-ggenerator-jhipsteryojhipster然后我们可以看到命令行提示了很多选项，我们看一个根据自己的项目需求来选择。不过下载时间比较长，了解不多关于后端应该用到的JAVA相关的框架，所以对这个项目了解不多，就不深入分析了。但是通过这些操作，我们可以知道如何选择一个适合自己的项目框架。PS：在截图中，我们还可以看到一个叫做jest的模块。这里的描述应该是可以使用这个命令把jest配置好的单元测试引入到任何一个rect项目中。Cube提供Web开发、测试、持续集成、发布部署一站式解决方案，强大的运维脚手架。出来。使用以下命令安装脚手架，创建项目：yarnglobaladd@cube/create-cube-appcreate-cube-appmy-app然后我们可以看到我们的项目结构：.├──package.json├──README.md├──server#后端工程目录│├──config│├──nodemon.json│├──package.json│├──README.md│├──src│├──test│└──yarn.lock├──ui#前端项目目录│├──docs│├──index.html│├──package.json│├──public│├──README.md│├──src│└──yarn.lock└──yarn.lock中最外层的package.json包含了一些项目整体开发中会用到的工具链，在server和ui目录下，有前端和对应的开发工具链后端配置。当项目运行yarnbuild时，在ui中构建的文件将在服务器构建后作为静态文件复制到dist文件夹中。最后运行dist/server.js一键完美运行。PS：为什么后端也需要打包？https://stackoverflow.com/que...
