{"id":1304,"date":"2021-05-13T19:30:00","date_gmt":"2021-05-13T10:30:00","guid":{"rendered":"https:\/\/ito-u-oti.com\/?p=1304"},"modified":"2021-05-24T19:55:31","modified_gmt":"2021-05-24T10:55:31","slug":"react-monorepo","status":"publish","type":"post","link":"https:\/\/ito-u-oti.com\/?p=1304","title":{"rendered":"[React.js]monorepo\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b+typescript"},"content":{"rendered":"\n

React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\uff12\u3064\u3042\u308a\u3001\u5171\u901a\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3092common\u3068\u3044\u3046\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u96c6\u7d04\u3057\u3066\u4f7f\u3046\u3053\u3068\u3092\u60f3\u5b9a\u3057\u3066monorepo\u30d9\u30fc\u30b9\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

monorepo\u3068\u306f<\/h2>\n\n\n\n

1 \u3064\u306e\u30ea\u30dd\u30b8\u30c8\u30ea\u306e\u4e2d\u306b\u8907\u6570\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u540c\u68b1\u3059\u308b\u30ea\u30dd\u30b8\u30c8\u30ea\u306e\u904b\u7528\u65b9\u6cd5<\/p>\u30e2\u30ce\u30ec\u30dd\u5165\u9580 \u2013 Gutenberg \u304c\u63a1\u7528\u3059\u308b\u30ea\u30dd\u30b8\u30c8\u30ea\u6226\u7565<\/a><\/cite><\/blockquote>\n\n\n\n

yarn\u3067monorepo\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b<\/h2>\n\n\n\n

yarn\u3067monorepo\u3092\u4f7f\u3063\u3066\u3044\u304f\u5834\u5408\u306f\u3001<\/p>\n\n\n

\nyarn workspace\n<\/pre><\/div>\n\n\n
\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
subproject\u306b\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u6642\u306f<\/p>\n\n\n
\nyarn workspace subproject-name add package-name\n<\/pre><\/div>\n\n\n
\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
project\u306e\u4f5c\u6210<\/h2>\n\n\n\n
root,subproject\u3092create-react-app\u3067\u4f5c\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n
\n# root project\u3092\u4f5c\u308b\nnpm init\n# create-react-app\u3092install\nnpm install create-react-app\n# sub project\u3092\u4f5c\u308b\nnpx create-react-app packages\/project1 --typescript\nnpx create-react-app packages\/project2 --typescript\nnpx create-react-app packages\/common --typescript\n<\/pre><\/div>\n\n\n
root project \u306e\u8a2d\u5b9a<\/h2>\n\n\n\n
\u30eb\u30fc\u30c8\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306epackage.json<\/code>\u3092\u4fee\u6b63<\/h3>\n\n\n\n
\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n
\n{\n  ...\n  "private": true,\n  "workspaces": {\n    "packages": ["packages\/*"],\n    "nohoist": ["**\/react-scripts", "**\/react-scripts\/**", "**\/@generated", "**\/@generated\/*"]\n  }\n  ...\n}\n<\/pre><\/div>\n\n\n
project \u5171\u901a\u306etsconfig.json<\/code>\u3092\u30eb\u30fc\u30c8\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u4f5c\u6210<\/h3>\n\n\n\n
tsconfig.json\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n
\n{\n  "compilerOptions": {\n    "target": "es5",\n    "module": "esnext",\n    "strict": true,\n    "esModuleInterop": true,\n    "forceConsistentCasingInFileNames": true\n  }\n}\n<\/pre><\/div>\n\n\n
\u3053\u3053\u307e\u3067<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
sub project\u306e\u8a2d\u5b9a\uff08project1,project2\uff09<\/h2>\n\n\n\n
\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n\n\n\n
monorepo\u5316\u306b\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n
\nyarn workspace project1 add react-app-rewired\nyarn workspace project1 add -D customize-cra\n\nyarn workspace project2 add react-app-rewired\nyarn workspace project2 add -D customize-cra\n<\/pre><\/div>\n\n\n
package.json<\/code>\u4fee\u6b63<\/h3>\n\n\n\n
\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u306b\u4fee\u6b63\u3057\u307e\u3059\u3002
react-scripts\u306b\u3088\u308b\u5b9f\u884c\u30b3\u30de\u30f3\u30c9\u304b\u3089react-app-rewired\u306b\u3088\u308b\u5b9f\u884c\u306b\u5909\u3048\u3066\u307e\u3059\u3002<\/p>\n\n\n
\n    ```json\n    {\n      ...\n      "scripts": {\n        "start": "react-app-rewired start",\n        "build": "react-app-rewired build"\n      }\n      ...\n    }\n    ```\n<\/pre><\/div>\n\n\n
tsconfig.json<\/code>\u4fee\u6b63<\/h3>\n\n\n\n
\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n
\n    {\n      "extends": ".\/tsconfig.path.json",\n      ...\n    }\n<\/pre><\/div>\n\n\n
tsconfig.path.json<\/code>\u306e\u4f5c\u6210<\/h3>\n\n\n\n
tsconfig.path.json\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
\u5171\u901a\u30e2\u30b8\u30e5\u30fc\u30eb\u7528\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u300c@common\u300d\u3068\u3044\u3046\u540d\u524d\u3067\u8a8d\u8b58\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n
\n    {\n      "extends": "..\/..\/tsconfig.json",\n      "compilerOptions": {\n        "baseUrl": ".\/",\n        "paths": {\n          "@common\/*": ["..\/common\/src\/*"]\n        }\n      }\n    }\n<\/pre><\/div>\n\n\n
config-overrides.js<\/code>\u306e\u4f5c\u6210<\/h3>\n\n\n\n
config-overrides.js\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n
\n    const { removeModuleScopePlugin, override, babelInclude } = require('customize-cra');\n    const path = require('path');\n\n    function addAlias(config) {\n      config.resolve = {\n        ...config.resolve,\n        alias: { '@common': path.resolve(__dirname, '..\/    common\/src') },\n      };\n      return config;\n    }\n\n    module.exports = override(\n      addAlias,\n\n      \/\/remove limitations of create-react-app\n      removeModuleScopePlugin(),\n      babelInclude([path.resolve('src'), path.resolve('..\/    common\/src')])\n    );\n<\/pre><\/div>\n\n\n
\u3053\u3053\u307e\u3067\uff08sub project\u306e\u4e2d\uff09<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
sub project\u306e\u8a2d\u5b9a\uff08common\uff09<\/h2>\n\n\n\n
\u3044\u3089\u306a\u3044\u3082\u306e\u3092\u524a\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n