【WEB 工程化学习（1/3）】脚手架

介绍：
WEB工程化学习的目标是让项目从"搭建-开发-部署"更加快速以及规范。文章中使用的相关技术栈是ReatJS和NodeJS.

首先，我们一起来了解什么是脚手架，所谓脚手架其实就是帮助我们快速搭建项目的工具，通常只需要跑一个命令就可以帮助我们生成一个项目，让用户不需要再思考项目的目录结构，单元测试，所需要的依赖等繁琐的事情。然后我们来看看目前常用的脚手架有哪些：

1. 官方推出的 create-react-app
2. 世界流行的 yoman
3. 公司内部使用的 cube

create-react-app
安装脚手架参照官方的文章 https://github.com/facebook/c...

npm i create-react-app
npx create-react-app my-app
cd my-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

启动项目：

npm start

提供的快捷操作包括：

1. npm start 启动项目
2. npm test 跑测试
3. npm run build 打包代码
4. npm run eject 把项目webpack, babel, eslint等依赖导出到项目。不能回滚的一次性操作。

当eject后主要新增了config贺scripts的目录，package.json中的依赖也全部出来了。通过阅读eject出来的代码我们可以发现，yarn start 是使用了WebpackDevServer单独启动的前端项目，这样便于实现前后端分离的项目。

而当我们需要调试前后端的时候，可以在package.json中添加（假如我们的后端在localhost;4000）

proxy": "http://localhost:4000"

PS: 如果项目想用TypeScript， 可以产考 https://github.com/wmonk/crea...

该的脚手架提供了非常基础的的前端代码，比较适合于组件模版的生成。

Yoman
Yeoman支持创建新的项目，以及在新项目中新增模块，支持的语言也很丰富有Web, JAVA, Python, C#....

我在官方搜索了下和react相关的generator：

然后使用以下命令进行安装：

npm install -g yo
npm install -g generator-jhipster
yo jhipster

然后我们可以看到命令行提示很多选择，我们看一个根据我们的项目需求进行选择。但是下在的时间非常的长，而且后端应该使用的JAVA相关的框架，我并不是特别了解，所以对这个项目不做深入的分析了。但是通过这些操作我们可以知道如何选择适合自己的项目框架。

PS: 在截图中我们还可以看到一个叫jest的模块，这里看描述应该是可以通过这个命令把jest配置好的单元测试引入到任何rect项目中。

Cube
公司内部部提供的一站式解决 Web 开发、测试、持续集成、发布部署、运维的强大脚手架，目前还没对外发布，希望某天可以开源出来。

使用以下命令安装脚手架，创建项目：

yarn global add @cube/create-cube-app
create-cube-app my-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 目录下，又有各自前后端对应的开发工具链的配置。

项目在跑yarn build的时候，会把ui中build出来的文件，拷贝到server build后的dist文件夹中，作为static Files。最后跑dist/server.js就可以完美一键运行。

PS: 后端为什么也需要打包呢？ https://stackoverflow.com/que...