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

Nxはいいぞ

puku0x
December 11, 2020

 Nxはいいぞ

React HAKATA 第1回

puku0x

December 11, 2020
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

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

    ◦ Jest サポート • v7.x ◦ Cypress, NestJS サポート • v8.x ◦ React, Next.js, Storybook サポート • v9.x ◦ Gatsby サポート 6
  2. $ 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
  3. @puku0x Schematics • アプリケーション ◦ nx g @nrwl/react:app • ライブラリ

    ◦ nx g @nrwl/react:lib • Schematics ◦ nx g workspace-schematic 10
  4. $ 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
  5. $ npx nx migrate latest : $ rm package-lock.json &&

    rm -rf node_modules $ npm i : $ npx nx migrate --run-migrations=migrations.json 自動バージョンアップ 14
  6. /* 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
  7. $ 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
  8. @puku0x 構文チェック&フォーマット • ESLint/TSLint ◦ nx lint • Prettier ◦

    nx format:write ◦ lint-staged使用時は '--uncommitted' 推奨 18
  9. @puku0x 変更検知による高速化 • nx affected:lint • nx affected:test • nx

    affected:build • nx affected:e2e 21 変更されたプロジェクトのみ実行 → CI時間短縮
  10. @puku0x その他のツール • Nx Console ◦ VS Code 拡張 •

    Nx Plugin ◦ カスタムプラグイン • Nx Cloud ◦ リモートキャッシュ 23 https://nx.app