Nrwlスタイルプロジェクト開発monorepoを使用します

Nrwlは角-cliの回路図を拡張し、角度-cliのスーパーセットで、ビルダーはmonorepoスタイルの発展を実現することができます。あなたは、角度と、ワークスペース内の別のフレームを使用するフロントエンド・アプリケーションを構築するために反応の両方を使用することができますし、同じリポジトリにフルスタックのアプリケーションを実現するためにnodejsバックグラウンドアプリケーションの開発を含めることができます。

インストール

npm install -g @nrwl/schematics

アプリケーションの作成

ワークスペースを作成します。

npxルックを使用しルアンYifengチュートリアルを。

npx --ignore-existing create-nx-workspace myorg

作成プロセスは、ワークスペースの種類を選択できます。

  empty             [an empty workspace]
  angular           [a workspace with a single Angular application]
  angular-ivy       [a workspace with a single Angular application built using Ivy]
  react             [a workspace with a single React application]
  web components    [a workspace with a single app built using web components]
  full-stack        [a workspace with a full stack application (NestJS + Angular Ivy)]
复制代码

一度作成したmyorg次のように目次を：

myorg/
├── apps/
├── libs/
├── tools/
├── nx.json
├── angular.json
├── package.json
├── tsconfig.json
├── tslint.json
└── README.md
复制代码

角度のアプリケーションの作成

まず、角度の追加アプリケーション機能を作成します。

ng add @nrwl/angular

また、アプリケーションのさまざまな機能を追加することができます。

ng add @nrwl/angular # Adds Angular capabilities
ng add @nrwl/react # Adds React capabilities
ng add @nrwl/nest # Adds Nest capabilities
ng add @nrwl/express # Adds Express capabilities
ng add @nrwl/web # Adds Web capabilities
ng add @nrwl/node # Adds Node capabilities
复制代码

そして、角度のアプリケーションを作成します。

ng g @nrwl/angular:application todos

一度作成したディレクトリの内容：

myorg/
├── apps/
│   ├── todos/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   ├── assets/
│   │   │   ├── environments/
│   │   │   ├── favicon.ico
│   │   │   ├── index.html
│   │   │   ├── main.ts
│   │   │   ├── polyfills.ts
│   │   │   ├── styles.scss
│   │   │   └── test.ts
│   │   ├── browserslist
│   │   ├── jest.conf.js
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
│   └── todos-e2e/
│       ├── src/
│       │   ├── fixtures/
│       │   │   └── example.json
│       │   ├── integration/
│       │   │   └── app.spec.ts
│       │   ├── plugins/
│       │   │   └── index.ts
│       │   └── support/
│       │       ├── app.po.ts
│       │       ├── commands.ts
│       │       └── index.ts
│       ├── cypress.json
│       ├── tsconfig.e2e.json
│       ├── tsconfig.json
│       └── tslint.json
├── libs/
├── tools/
├── angular.json
├── nx.json
├── package.json
├── tsconfig.json
├── tslint.json
└── README.md
复制代码

アプリケーションを実行します。

ng serve todos
复制代码

反応したアプリケーションの作成

まず、アプリケーションの追加機能を反応させる作成します。

ng add @nrwl/react

次に、作成したアプリケーションを反応させます。

ng g @nrwl/react:app reactapp

一度作成したディレクトリの内容：

happynrwl/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   ├── reactapp/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.css
│   │   │   │   ├── app.spec.tsx
│   │   │   │   └── app.tsx
│   │   │   ├── assets/
│   │   │   ├── environments/
│   │   │   ├── favicon.ico
│   │   │   ├── index.html
│   │   │   ├── main.ts
│   │   │   ├── polyfills.ts
│   │   │   ├── styles.scss
│   │   │   └── test.ts
│   │   ├── browserslist
│   │   ├── jest.conf.js
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
│   └── reactapp-e2e/
│       ├── src/
│       │   ├── integrations/
│       │   │   └── app.spec.ts
│       │   ├── fixtures/
│       │   ├── plugins/
│       │   └── support/
│       ├── cypress.json
│       ├── tsconfig.e2e.json
│       └── tslint.json
├── libs/
├── README.md
├── angular.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json
复制代码

アプリケーションを実行します。

ng serve reactapp

ノード・アプリケーションを追加

nest.js機能を追加

ng add @nrwl/nest

express.js機能を追加

ng add @nrwl/express

Node.jsの機能を追加

ng add @nrwl/node

巣のアプリケーションを作成します。

ng g @nrwl/nest:app api --frontendProject=todos

--frontendProject=todos角度アプリケーションAPIのプロキシ設定を作成します。

一度作成したディレクトリの内容：

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   └── api/
│       ├── jest.conf.js
│       ├── proxy.conf.json
│       ├── src/
│       │   ├── app/
│       │   │   ├── app.controller.ts
│       │   │   ├── app.controller.spec.ts
│       │   │   ├── app.module.ts
│       │   │   ├── app.service.ts
│       │   │   └── app.service.spec.ts
│       │   ├── assets/
│       │   ├── environments/
│       │   │   ├── environment.ts
│       │   │   └── environment.prod.ts
│       │   └── main.ts
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
│       └── tslint.json
├── libs/
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json
复制代码

アプリケーションを実行します。

ng serve api

共有コードライブラリを作成します。

角度や巣共通のインターフェースを作成します

ng g @nrwl/workspace:lib data

一度作成したディレクトリの内容：

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   └── api/
├── libs/
│   └── data/
│       ├── jest.conf.js
│       ├── src/
│       │   ├── lib/
│       │   │   └── data.ts
│       │   └── index.ts
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
│       └── tslint.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json
复制代码

data.tsで定義されたインタフェース：

export interface Todo {
  title: string;
}

复制代码

角度のIn：

import { Todo } from '@myorg/data';

复制代码

角度のコンポーネントライブラリを作成します

ng g @nrwl/angular:lib ui

一度作成したディレクトリの内容：

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   └── api/
├── libs/
│   ├── data/
│   └── ui/
│       ├── jest.conf.js
│       ├── src/
│       │   ├── lib/
│       │   │   ├── ui.module.spec.ts
│       │   │   └── ui.module.ts
│       │   └── index.ts
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
│       └── tslint.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json

复制代码

コンポーネントを追加します。

ng g component todos --project=ui --export

サインアップCUSTOM_ELEMENTS_SCHEMAコンパイラに指示しますモードは、間違って行くことはないアンギュラ見ているときに、コンポーネントテンプレート内の非標準の要素タグ。

//app.module
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  ...
})
export class AppModule {}

复制代码

作成されたlibに角度-CLIと同じ方法を使用します。

角度と反応し、共有コンポーネントライブラリの作成

ng g @nrwl/workspace:lib ui

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   ├── reactapp/
│   └── reactapp-e2e/
├── libs/
│   └── ui
│       ├── src/
│       │   ├── lib/
│       │   └── index.ts
│       ├── jest.conf.js
│       ├── tsconfig.lib.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
│       └── tslint.json
├── README.md
├── angular.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json

复制代码

greeting.element.tsコンポーネントを作成するには、以下のlibに：

export class GreetingElement extends HTMLElement {
  public static observedAttributes = ['title'];

  attributeChangedCallback() {
    this.innerHTML = `<h1>Welcome to ${this.title}!</h1>`;
  }
}

customElements.define('happynrwl-greeting', GreetingElement);

复制代码

そしてindex.jsの輸出

export * from './lib/greeting.element';

复制代码

角度で

インポートmain.js

import '@myorg/ui'; // <-- the new library

复制代码

app.module登録ではCUSTOM_ELEMENTS_SCHEMA、あなたはでの角度で使用することができます。

使用することはで反応します

インポートにmain.tsx：

import '@happynrwl/ui';

复制代码

src追加し、次intrinsic.d.tsのファイルは、次のように作成します。

declare namespace JSX {
  interface IntrinsicElements {
    [elemName: string]: any;
  }
}

复制代码

中app.tsxで：

import * as React from 'react';
import { Component } from 'react';

import './app.css';

export class App extends Component {
  render() {
    const title = 'reactapp';
    return (
      ...
      <happynrwl-greeting title={title} />
      ...
    );
  }
}

复制代码

プロジェクトの依存関係グラフを作成します。

Nxのワークスペースは、コードベースが成長し、あなたが使用することができ、アプリケーションやライブラリの数十を含むことができnpm run dep-graph、ワークスペースブラウザでのコマンド出力依存関係グラフを。

ます。https：//juejin.im/post/5d04a7d36fb9a07ee30e16f3で再現