Nxはいいぞ

Nxはいいぞ第１回

Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2

@puku0x 複数プロジェクト管理どうする？ 3 共通ライブラリ複数アプリ

@puku0x モノレポ • 単一リポジトリで複数プロジェクトを管理 • Google、Facebookなどで採用 4 ...

@puku0x Nx • モノレポ管理ツール ◦ モダンな開発環境 ◦ バージョンアップ自動化 ◦ 変更検知とキャッシュ機構
5 https://nx.dev/

@puku0x 幅広いサポート • v1.x〜（2018年4月） ◦ Angular CLI 拡張 • v6.x
◦ Jest サポート • v7.x ◦ Cypress, NestJS サポート • v8.x ◦ React, Next.js, Storybook サポート • v9.x ◦ Gatsby サポート 6

@puku0x React Native 対応（v10.4〜） 7 https://blog.nrwl.io/introducing-react-native-support-for-nx-48d335e90c89

$ npx create-nx-workspace : ? Workspace name (e.g., org name)
workspace ? What to create in the new workspace react ? Application name web ? Default stylesheet format styled-components ワークスペース作成 8

@puku0x ディレクトリ構成 • apps/libs/toolsでの分離 • 単一バージョンポリシー • Linterやテスト周り設定済 ◦ webpack.conﬁg.js設定可
◦ tsconﬁg.json設定可 9

@puku0x Schematics • アプリケーション ◦ nx g @nrwl/react:app • ライブラリ
◦ nx g @nrwl/react:lib • Schematics ◦ nx g workspace-schematic 10

$ npx nx g component : ? What is the
name of the project for this component? web ? What name would you like to use for the component? hello ? Should this component be exported in the project? No CREATE apps/web/src/app/hello/hello.spec.tsx (271 bytes) CREATE apps/web/src/app/hello/hello.tsx (335 bytes) コンポーネント生成 11

@puku0x 12

@puku0x 13 nx.dev/nx-console

$ npx nx migrate latest : $ rm package-lock.json &&
rm -rf node_modules $ npm i : $ npx nx migrate --run-migrations=migrations.json 自動バージョンアップ 14

/* apps/web/webpack.config.js */ const WebpackNotifierPlugin = require('webpack-notifier'); const getWebpackConfig =
require('@nrwl/react/plugins/webpack'); module.exports = config => { return getWebpackConfig({ ...config, plugins: [ ...config.plugins, new WebpackNotifierPlugin({ alwaysNotify: true }), ] }); }; webpack設定上書き 15

@puku0x テスト実行 • Jest ◦ nx test <project-name> • Cypress
◦ nx e2e <project-name-e2e> 16

$ npm i -D @nrwl/storybook $ nx g @nrwl/react:storybook-configuration #
Run storybook $ nx run <project-name>:storybook # E2E with Cypress $ nx e2e <project-name-e2e> Storybook + E2Eテスト 17

@puku0x 構文チェック＆フォーマット • ESLint/TSLint ◦ nx lint • Prettier ◦
nx format:write ◦ lint-staged使用時は '--uncommitted' 推奨 18

@puku0x Lintルールによる依存関係の制御 • nx-enforce-module-boundaries https://nx.dev/web/guides/monorepo-tags 19

@puku0x 依存関係の可視化 • nx dep-graph • nx affected:dep-graph 20

@puku0x 変更検知による高速化 • nx affected:lint • nx affected:test • nx
affected:build • nx affected:e2e 21 変更されたプロジェクトのみ実行 → CI時間短縮

@puku0x キャッシュによる高速化 22 https://blog.nrwl.io/distributed-caching-in-nx-164edfbc68e0

@puku0x その他のツール • Nx Console ◦ VS Code 拡張 •
Nx Plugin ◦ カスタムプラグイン • Nx Cloud ◦ リモートキャッシュ 23 https://nx.app

@puku0x まとめ • Nxはいいぞ ◦ Reactを用いたアプリケーション開発にオススメ ◦ 幅広いサポート ◦ https://nx.dev/
24 $ npx create-nx-workspace

@puku0x 25 https://www.vega-c.com/recruit/ 採用のお知らせ

@puku0x Thank you! @puku0x Noriyuki Shinpuku

Nxはいいぞ

Nxはいいぞ

puku0x

More Decks by puku0x

Other Decks in Technology

Featured

Transcript

Nxはいいぞ第１回

Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2

@puku0x 複数プロジェクト管理どうする？ 3 共通ライブラリ複数アプリ

@puku0x モノレポ • 単一リポジトリで複数プロジェクトを管理 • Google、Facebookなどで採用 4 ...

@puku0x Nx • モノレポ管理ツール ◦ モダンな開発環境 ◦ バージョンアップ自動化 ◦ 変更検知とキャッシュ機構

@puku0x 幅広いサポート • v1.x〜（2018年4月） ◦ Angular CLI 拡張 • v6.x

@puku0x React Native 対応（v10.4〜） 7 https://blog.nrwl.io/introducing-react-native-support-for-nx-48d335e90c89

$ npx create-nx-workspace : ? Workspace name (e.g., org name)

@puku0x ディレクトリ構成 • apps/libs/toolsでの分離 • 単一バージョンポリシー • Linterやテスト周り設定済 ◦ webpack.conﬁg.js設定可

@puku0x Schematics • アプリケーション ◦ nx g @nrwl/react:app • ライブラリ

$ npx nx g component : ? What is the

@puku0x 12

@puku0x 13 nx.dev/nx-console

$ npx nx migrate latest : $ rm package-lock.json &&

/* apps/web/webpack.config.js */ const WebpackNotifierPlugin = require('webpack-notifier'); const getWebpackConfig =

@puku0x テスト実行 • Jest ◦ nx test <project-name> • Cypress

$ npm i -D @nrwl/storybook $ nx g @nrwl/react:storybook-configuration #

@puku0x 構文チェック＆フォーマット • ESLint/TSLint ◦ nx lint • Prettier ◦

@puku0x Lintルールによる依存関係の制御 • nx-enforce-module-boundaries https://nx.dev/web/guides/monorepo-tags 19

@puku0x 依存関係の可視化 • nx dep-graph • nx affected:dep-graph 20

@puku0x 変更検知による高速化 • nx affected:lint • nx affected:test • nx

@puku0x キャッシュによる高速化 22 https://blog.nrwl.io/distributed-caching-in-nx-164edfbc68e0

@puku0x その他のツール • Nx Console ◦ VS Code 拡張 •

@puku0x まとめ • Nxはいいぞ ◦ Reactを用いたアプリケーション開発にオススメ ◦ 幅広いサポート ◦ https://nx.dev/

@puku0x 25 https://www.vega-c.com/recruit/ 採用のお知らせ

@puku0x Thank you! @puku0x Noriyuki Shinpuku