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.config.js設定可 ○ tsconfig.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 ● Cypress ○ nx e2e 16

$ npm i -D @nrwl/storybook $ nx g @nrwl/react:storybook-configuration # Run storybook $ nx run :storybook # E2E with Cypress $ nx 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