前端工程化:脚手架

栏目: 编程工具 · 发布时间: 5年前

内容简介:Web 工程化学习的目标是让项目从”搭建-开发-部署”更加快速以及规范。文章中使用的相关技术栈是 ReatJS 和 NodeJS.首先,我们一起来了解什么是脚手架,所谓脚手架其实就是帮助我们快速搭建项目的工具,通常只需要跑一个命令就可以帮助我们生成一个项目,让用户不需要再思考项目的目录结构,单元测试,所需要的依赖等繁琐的事情。然后我们来看看目前常用的脚手架有哪些:

前端工程化:脚手架

介绍

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


以上所述就是小编给大家介绍的《前端工程化:脚手架》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

热搜:搜索排名营销大揭秘

热搜:搜索排名营销大揭秘

【美】肖恩·布拉德利 / 中国人民大学出版社有限公司 / 2018-7-30 / CNY 55.00

首部大数据在我国政府管理场景中的应用实践案例读本,全面展示我国电子政务与数字化建设的成果,深度理解实施国家大数据战略的重要意义。 本书作者作为国内最早从事大数据应用研究的实践者之一,亲历了中国大数据的发展历程、主要事件、应用案例以及行业变化。 在本书中,作者将其所亲历的大数据发展历程进行了阐述,从大数据的基本概念、特点到实践解读,通俗易懂,给我们的实际工作提供了重要参考。作者将帮助读者......一起来看看 《热搜:搜索排名营销大揭秘》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具