npm workspacesを試す

ルートパッケージの初期化

npm init -y

個々のパッケージの初期化、ルートパッケージで実行する

npm init -y -w packages/a

薄田達哉 / tatsuyasusukida

ソースコード

packages/a/index.js

function add(a, b) {
  return a + b;
}

module.exports = add;

main.js

const add = require("a");

function main() {
  const answer = add(1, 2);
  console.log({ answer });
}

main();

コマンド

node main.js

実行結果

{ answer: 3 }

薄田達哉 / tatsuyasusukida

パッケージaにabbrevをインストールしたい場合は下記のコマンドを実行する

npm install abbrev -w a

試しにmustacheでもインストールしてみる

npm install mustache -w a

ワークスペースのpackage.jsonが更新されている

packages/a/package.json

{
  "name": "a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mustache": "^4.2.0"
  }
}

packages/a内にpackage-lock.jsonは作成されない、ルートのpackage-lock.jsonに集約される

packages/a/index.js

const Mustache = require("mustache");

function add(a, b) {
  const answer = a + b;
  return Mustache.render("a + b = {{answer}}", { answer });
}

module.exports = add;

ソースコードを少し変更してから実行する

{ answer: 'a + b = 3' }

ワークスペースからMustacheを利用できていることがわかる

薄田達哉 / tatsuyasusukida

一旦仕切り直してTypeScriptを試してみる

npm init -y
npm init -y -w packages/a
npm init -y -w apps/b

touch packages/a/add.ts
touch apps/b/main.ts

npm install --save-dev ts-node -w b
npm install --save a -w b

ソースコード

packages/a/add.ts

export function add(a: number, b: number) {
  return a + b;
}

apps/b/main.ts

import { add } from "a/add";

function main() {
  const answer = add(1, 2);
  console.log({ answer });
}

main();

コマンド

npx ts-node apps/b/main.ts

実行結果

{ answer: 3 }

薄田達哉 / tatsuyasusukida

VSCodeのコード補完

addをCommand + .でauto fixを呼び出してインポートする

最初は../../packages/a/addになってしまったが、1回手動で修正した後はa/addからインポートするようになった

試しにpackages/aにsub.tsを追加してコード補完を検証してみる

touch packages/a/sub.ts

ソースコード

packages/a/sub.ts

export function sub(a: number, b: number) {
  return a - b;
}

apps/b/main.ts

import { add } from "common/add";
import { sub } from "common/sub";

function main() {
  const sum = add(1, 2);
  const diff = sub(1, 2);
  console.log({ sum, diff });
}

main();

コマンド

npx ts-node apps/b/main.ts

実行結果

{ sum: 3, diff: -1 }

import { sub } from "common/sub";はVSCodeのauto fixで追加することができた

すごいVSCode

薄田達哉 / tatsuyasusukida

とても参考になるスクラップ

このスクラップみたいに投稿の冒頭に##をつけて見出しにすると後からわかりやすいので真似しよう

薄田達哉 / tatsuyasusukida

スコープ機能を試してみる

npm init -y
npm init -y --scope my-project -w packages/a
npm init -y --scope my-project -w apps/b

touch packages/a/add.ts
touch apps/b/main.ts

npm install @my-project/a -w @my-project/b

ソースコード

packages/a/add.ts

export function add(a: number, b: number) {
  return a + b;
}

apps/b/main.ts

import { add } from "@my-project/a/add";

function main() {
  const sum = add(1, 2);
  console.log({ sum });
}

main();

実行コマンド

npx ts-node apps/b/main.ts

実行結果

{ sum: 3 }

VSCodeの自動インポート

成功するケースと失敗するケースがある

例えば下記のようなケースだとaddやsubでCommand + .でauto fixを呼び出してもimport { add } from "@my-project/a/add";が追加されない

function main() {
  const sum = add(1, 2);
  const diff = sub(1, 2);
  console.log({ sum, diff });
}

main();

と思ったけど今やったら追加された笑　理由がよくわからない

スコープはついていた方がnpmパッケージとの名前の衝突などがなくて良さそう

でも無い方がVSCodeのコード補完などが成功することが多いので悩ましい

他のみんなはどうしているんだろう？

薄田達哉 / tatsuyasusukida

参考になりそう

薄田達哉 / tatsuyasusukida

スコープはつけた方が良さそう

スコープ名はそのプロジェクトの名前や会社名などが良さそう