Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nxはいいぞ

8bc941b1868dfc680dd1e11a797ca385?s=47 puku0x
December 11, 2020

 Nxはいいぞ

React HAKATA 第1回

8bc941b1868dfc680dd1e11a797ca385?s=128

puku0x

December 11, 2020
Tweet

Transcript

  1. Nxはいいぞ 第1回

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

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

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

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

    5 https://nx.dev/
  6. @puku0x 幅広いサポート • v1.x〜(2018年4月) ◦ Angular CLI 拡張 • v6.x

    ◦ Jest サポート • v7.x ◦ Cypress, NestJS サポート • v8.x ◦ React, Next.js, Storybook サポート • v9.x ◦ Gatsby サポート 6
  7. @puku0x React Native 対応(v10.4〜) 7 https://blog.nrwl.io/introducing-react-native-support-for-nx-48d335e90c89

  8. $ 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
  9. @puku0x ディレクトリ構成 • apps/libs/toolsでの分離 • 単一バージョンポリシー • Linterやテスト周り設定済 ◦ webpack.config.js設定可

    ◦ tsconfig.json設定可 9
  10. @puku0x Schematics • アプリケーション ◦ nx g @nrwl/react:app • ライブラリ

    ◦ nx g @nrwl/react:lib • Schematics ◦ nx g workspace-schematic 10
  11. $ 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
  12. @puku0x 12

  13. @puku0x 13 nx.dev/nx-console

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

    rm -rf node_modules $ npm i : $ npx nx migrate --run-migrations=migrations.json 自動バージョンアップ 14
  15. /* 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
  16. @puku0x テスト実行 • Jest ◦ nx test <project-name> • Cypress

    ◦ nx e2e <project-name-e2e> 16
  17. $ 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
  18. @puku0x 構文チェック&フォーマット • ESLint/TSLint ◦ nx lint • Prettier ◦

    nx format:write ◦ lint-staged使用時は '--uncommitted' 推奨 18
  19. @puku0x Lintルールによる依存関係の制御 • nx-enforce-module-boundaries https://nx.dev/web/guides/monorepo-tags 19

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

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

    affected:build • nx affected:e2e 21 変更されたプロジェクトのみ実行 → CI時間短縮
  22. @puku0x キャッシュによる高速化 22 https://blog.nrwl.io/distributed-caching-in-nx-164edfbc68e0

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

    Nx Plugin ◦ カスタムプラグイン • Nx Cloud ◦ リモートキャッシュ 23 https://nx.app
  24. @puku0x まとめ • Nxはいいぞ ◦ Reactを用いたアプリケーション開発にオススメ ◦ 幅広いサポート ◦ https://nx.dev/

    24 $ npx create-nx-workspace
  25. @puku0x 25 https://www.vega-c.com/recruit/ 採用のお知らせ

  26. @puku0x Thank you! @puku0x Noriyuki Shinpuku