fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Nx
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://nx.dev/
GitHub:https://github.com/nrwl/nx
网站描述:用 monorepo来管理你的 Angular 应用

Nx是前Google的angular团队成员Jeff Cross和Victor Savkin创办的,致力于新一代的智能化、可扩展的构建框架。
用于管理Monorepo 非常合适,下面我们可以快速的利用Nx命令行创建一个Monorepo的项目。


什么是Nx

Nx 是一个用来构建 monorepos 的开发工具。自己从 Angular 6.X 版本的时候开始尝试使用 Nx 管理项目代码,那时候的 Nx 还只支持对 Angular 框架的扩展,现在的 Nx 添加了对 react 框架的支持,并且可以集成使用 Cypress, Jest, Prettier, TypeScript 等现在构建工具,支持 NestJs (一款 nodejs 后端框架),完成了对整个全栈生态的覆盖。


什么是Monorepo

monorepo 是一种组织管理代码的方法,从字面上来理解就是把与一个项目关的 package、module、project等都放在一个仓库中进行管理。与之相对应的管理方式是 multirepo,把与项目相关的业务拆分成不同的 module 或者 package 放在不同的仓库中,彼此之间独立维护。



快速开始

为了更好的体验Nx命令行所带来的变化,每一步都用git记录了,并且上传到了github上。

1.安装Nx

npm install -g nx
# or
yarn add global nx
# or
tyarn add global nx

2.创建一个Monorepo的原始项目

设置包含 React 应用程序的 Nx 工作区。

npx create-nx-workspace@latest stores --preset=react

命令输入之后,会有个选择框。使用命令后生成了一个vscode项目

3 启动项目

nx serve stores

控制台和浏览器的输出界面

现在Monorepo只有一个项目,现在在添加一个blog项目

4 添加新的项目进入Monorepo

yarn add @nrwl/next
nx generate @nrwl/next:app blog

5 测试项目

之前可以看出,Nx生成的模板项目中已经默认生成了一些测试代码,甚至连e2e测试框架都生成了。

## Unit test
nx test bike-store

6 编译项目

项目的开发和test我们已经做过了,接下来可以看构建了

# 对所有项目进行编译
nx run-many --target=build --all

至此我们一个基本的Monorepo项目已经搭建完成了,包含了开发、测试、编译三个流程。


链接: https://fly63.com/nav/3599

more>>
相关栏目
webpack
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起
官网GitHub
npm
javascript 最流行的包管理器
官网GitHub
yarn
可替代NPM的快速、可靠、安全的可信赖包管理工具Yarn
官网GitHub
bower
解决js的依赖管理
官网GitHub
grunt
基于Node.js的项目构建工具。它可以自动运行你所设定的任务
官网GitHub
Parcel
快速,零配置的 Web 应用程序打包器
官网GitHub
babel
Babel 是一个 JavaScript 编译器,可用下一代JavaScript 语法写代码
官网GitHub
browserify
一个浏览器端代码模块化工具,require和module.exports来导入和导出.Browserify的原理:部署时处理代码依赖,将模块打包为一个文件。
官网GitHub
HEAD
一份你可以在 <head> 里设置的列表
官网GitHub
Snibox
一个可自建托管的代码片段管理器
官网GitHub
Flow
Facebook 推出一个静态类型检测工具
官网GitHub
WeFlow
一个高效、强大、跨平台的前端开发工作流工具
官网GitHub
Athena
前端自动化流程构建工具
官网GitHub
Cooking
更易上手的前端构建工具
官网GitHub
vue-cli
一个基于 Vue.js 进行快速开发的完整系统
官网GitHub
Turborepo
一个用于 JavaScript 和 TypeScript monorepos 的高性能构建系统
官网GitHub

手机预览