前端工程化：脚手架

介绍

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

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

1. 官方推出的 create-react-app
2. 世界流行的 yoman
3. 知道创宇内部使用的 cube

create-react-app

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

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/create-react-app-typescript

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

Yoman

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

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

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

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

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

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

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/questions/37788142/webpack-for-back-end