📝
tsconfig.json の module
概要
JavaScript 及び TypeScript で利用される 2 つのモジュールシステム、CommonJS と ESModules があります。
- CommonJS はサーバサイドの Node.js で利用されるモジュールシステムです。
- ESModules はブラウザで利用されるモジュールシステムです。
module はどのモジュールシステムを利用するかを指定します。
- バックエンドの Node.js で利用する場合は CommonJS を指定します。
- フロントエンドで利用する場合は ESModules を指定します。
Next.js, Vue などのフレームワークでは、module の値で ESModules を指定します。
簡易例
こちらのコードがあったとします。
index.ts
import {add} from './lib';
console.log(add(1,2));
module が commonjs の場合のトランスパイルの例です。
index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const lib_1 = require("./lib");
console.log((0, lib_1.add)(1, 2));
//# sourceMappingURL=index.js.map
module が ES6 の場合のトランスパイルの例です。
index.js
import { add } from './lib';
console.log(add(1, 2));
//# sourceMappingURL=index.js.map
Next.jsの設定考察
create next-app で作成した Next.js プロジェクトで module の esnext が設定されています。値を変更しても next dev を実行すると強制的に module の値は esnext に変更されます。よって、変更せずそのままにしておきましょう。
tsconfig.json
{
"compilerOptions": {
"module": "esnext",
}
}
参考
公式の説明はこちらです。
以下が作業リポジトリです。
この記事の内容
この記事では module の値を指定し動作を確認します。Node.js & TypeScript のプロジェクトと Next.js のプロジェクトで動作確認を行います。
Node.js & TypeScriptのプロジェクトで動作確認
TypeScript の簡易プロジェクトを作成し、module の値を変更することでトランスパイルされる結果が変わることを確認します。
事前環境の構築
動作を作業するための Node.js & TypeScript のプロジェクトを作成します。長いので、折り畳んでおきます。
新規プロジェクト作成と初期環境構築の手順詳細
TypeScript の簡易プロジェクトを作成します。
まず、package.json を作成します。
$ mkdir -p tsconfig-module
$ cd tsconfig-module
$ pnpm init
下記で package.json を上書きします。ポイントは scripts に 3 つのスクリプトを追加しています。typecheck で型をチェックし、dev でローカルで動作確認、build でトランスパイルします。
package.json
{
"name": "tsconfig-resolvejsonmodule",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"typecheck": "tsc --noEmit",
"dev": "ts-node index.ts",
"build": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC"
}
TypeScript をインストールします。
$ pnpm install -D typescript ts-node
tsconfig.json を作成します。
$ npx tsc --init
tsconfig.json を作成します。
tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop":true
},
"include": ["**/*.ts","**/*.js"],
"exclude": ["node_modules", "dist"]
}
git を初期化します。
$ git init
.gitignore を作成します。
$ touch .gitignore
.gitignore
node_modules
コミットします。
$ git add .
$ git commit -m "feat:初期コミット"
module が CommonJS の場合
module が CommonJS の場合の挙動を確認します。
現状、module の値は commonjs が設定されています。
tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop":true
},
"include": ["**/*.ts","**/*.js"],
"exclude": ["node_modules", "dist"]
}
動作確認するためのコードを作成します。
$ touch index.ts lib.ts
index.ts
import {add} from './lib';
console.log(add(1,2));
lib.ts
export const add = (value1:number, value2:number) => {
return value1 + value2;
}
型チェックします。特にエラーは出ません。
$ pnpm run typecheck
ローカルで動作確認します。
$ pnpm run dev
3
トランスパイルします。
$ pnpm run build
$ tree dist
dist
├── index.js
├── index.js.map
├── lib.js
└── lib.js.map
1 directory, 4 files
トランスパイルされたファイルを確認します。index.js と lib.js を確認します。target が es2015 で、module が commonjs なので、基本文法は ES2015 で、モジュールシステムは CommonJS になります。
index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const lib_1 = require("./lib");
console.log((0, lib_1.add)(1, 2));
//# sourceMappingURL=index.js.map
lib.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.add = void 0;
const add = (value1, value2) => {
return value1 + value2;
};
exports.add = add;
//# sourceMappingURL=lib.js.map
コミットします。
$ git add .
$ git commit -m "feat: moduleがCommonJSの場合の動作確認"
module が ES6 の場合
module を ES6 に変更します。
tsconfig.json
{
"compilerOptions": {
"target": "es2015",
- "module": "commonjs",
+ "module": "ES6",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop":true
},
"include": ["**/*.ts","**/*.js"],
"exclude": ["node_modules", "dist"]
}
ローカルで動作確認します。エラーが出ます。
$ pnpm run dev
(node:85335) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/hayato94087/Private/tsconfig-module/index.ts:1
import { add } from './lib';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1195:20)
at Module._compile (node:internal/modules/cjs/loader:1239:27)
at Module.m._compile (/Users/hayato94087/Private/tsconfig-module/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.12.7_typescript@5.4.5/node_modules/ts-node/src/index.ts:1618:23)
at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
at Object.require.extensions.<computed> [as .ts] (/Users/hayato94087/Private/tsconfig-module/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.12.7_typescript@5.4.5/node_modules/ts-node/src/index.ts:1621:12)
at Module.load (node:internal/modules/cjs/loader:1133:32)
at Function.Module._load (node:internal/modules/cjs/loader:972:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
at phase4 (/Users/hayato94087/Private/tsconfig-module/node_modules/.pnpm/ts-node@10.9.2_@types+node@20.12.7_typescript@5.4.5/node_modules/ts-node/src/bin.ts:649:14)
上記のエラーメッセージである通り、package.json に "type": "module" を追加します。
package.json
{
"name": "tsconfig-resolvejsonmodule",
"version": "1.0.0",
"description": "",
"main": "index.ts",
+ "type": "module",
"scripts": {
"typecheck": "tsc --noEmit",
"dev": "ts-node index.ts",
"build": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-node": "^10.9.2",
"typescript": "^5.4.5"
}
}
あらためて、ローカルで動作確認します。エラーが出ます。
$ pnpm run dev
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/hayato94087/Private/tsconfig-module/index.ts
at new NodeError (node:internal/errors:399:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:74:9)
at defaultGetFormat (node:internal/modules/esm/get_format:114:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:597:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:449:22)
at new ModuleJob (node:internal/modules/esm/module_job:63:26)
at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:472:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:426:34) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
ts-node ではなく、tsx というパッケージを利用します。
$ pnpm install -D tsx
$ pnpm uninstall ts-node
ts-node から tsx に変更します。
package.json
{
"name": "tsconfig-resolvejsonmodule",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"type": "module",
"scripts": {
"typecheck": "tsc --noEmit",
- "dev": "ts-node index.ts",
+ "dev": "tsx index.ts",
"build": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tsx": "^4.7.2",
"typescript": "^5.4.5"
}
}
$ pnpm run dev
型チェックします。特にエラーは出ません。
$ pnpm run typecheck
ローカルで動作確認します。
$ pnpm run dev
3
トランスパイルします。
$ pnpm run build
index.js と lib.js を確認します。target が es2015 で、module が ES6 なので、基本文法は ES2015 で、モジュールシステムは ES6 になります。
index.js
import { add } from './lib';
console.log(add(1, 2));
//# sourceMappingURL=index.js.map
lib.js
export const add = (value1, value2) => {
return value1 + value2;
};
//# sourceMappingURL=lib.js.map
コミットします。
$ git add .
$ git commit -m "feat: moduleがES6の場合の動作確認"
Next.jsのプロジェクトで動作確認
事前環境の構築
動作を作業するための Next.js プロジェクトを作成します。長いので、折り畳んでおきます。
新規プロジェクト作成と初期環境構築の手順詳細
プロジェクトを作成
create next-app@latestでプロジェクトを作成します。
$ pnpm create next-app@latest next-tsconfig-module --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd next-tsconfig-module
Peer Dependenciesの警告を解消
Peer dependenciesの警告が出ている場合は、pnpm installを実行し、警告を解消します。
WARN Issues with peer dependencies found
.
├─┬ autoprefixer 10.0.1
│ └── ✕ unmet peer postcss@^8.1.0: found 8.0.0
├─┬ tailwindcss 3.3.0
│ ├── ✕ unmet peer postcss@^8.0.9: found 8.0.0
│ ├─┬ postcss-js 4.0.1
│ │ └── ✕ unmet peer postcss@^8.4.21: found 8.0.0
│ ├─┬ postcss-load-config 3.1.4
│ │ └── ✕ unmet peer postcss@>=8.0.9: found 8.0.0
│ └─┬ postcss-nested 6.0.0
│ └── ✕ unmet peer postcss@^8.2.14: found 8.0.0
└─┬ next 14.0.4
├── ✕ unmet peer react@^18.2.0: found 18.0.0
└── ✕ unmet peer react-dom@^18.2.0: found 18.0.0
以下を実行することで警告が解消されます。
$ pnpm i -D postcss@latest react@^18.2.0 react-dom@^18.2.0
不要な設定を削除し、プロジェクトを初期化します。
styles
CSSなどを管理するstylesディレクトリを作成します。globals.cssを移動します。
$ mkdir -p src/styles
$ mv src/app/globals.css src/styles/globals.css
globals.cssの内容を以下のように上書きします。
src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
初期ページ
app/page.tsxを上書きします。
src/app/page.tsx
import { type FC } from "react";
const Home: FC = () => {
return (
<div className="">
<div className="text-lg font-bold">Home</div>
<div>
<span className="text-blue-500">Hello</span>
<span className="text-red-500">World</span>
</div>
</div>
);
};
export default Home;
レイアウト
app/layout.tsxを上書きします。
src/app/layout.tsx
import "@/styles/globals.css";
import { type FC } from "react";
type RootLayoutProps = {
children: React.ReactNode;
};
export const metadata = {
title: "Sample",
description: "Generated by create next app",
};
const RootLayout: FC<RootLayoutProps> = (props) => {
return (
<html lang="ja">
<body className="">{props.children}</body>
</html>
);
};
export default RootLayout;
TailwindCSSの設定
TailwindCSSの設定（tailwind.config.ts）を上書きします。
tailwind.config.ts
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
plugins: [],
}
export default config
TypeScriptの設定
TypeScriptの初期設定はこちらです。
tsconfig.json
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
スクリプトを追加
型チェックのスクリプトを追加します。
package.json
{
"name": "next-tsconfig-include",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
+ "typecheck": "tsc"
},
"dependencies": {
"next": "14.1.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"postcss": "^8.4.38",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
動作確認
ローカルで動作確認します。
$ pnpm run dev
コミットして作業結果を保存しておきます。
$ git add .
$ git commit -m "feat:新規にプロジェクトを作成し, 作業環境を構築"
module が ES6 の場合
module に ES6 を設定した場合の挙動を確認します。
module に ES6 を設定します。
tsconfig.json
{
"compilerOptions": {
- "module": "esnext",
+ "module": "ES6",
}
}
next dev を実行しローカル環境で動作確認します。
$ pnpm run dev
▲ Next.js 14.2.1
- Local: http://localhost:3000
✓ Starting...
We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
The following mandatory changes were made to your tsconfig.json:
- module was set to esnext (for dynamic import() support)
✓ Ready in 2.4s
○ Compiling / ...
✓ Compiled / in 1547ms (477 modules)
GET / 200 in 1943ms
✓ Compiled in 382ms (229 modules)
以下が抜粋したログです。module が ES6 に強制的に変更されていることが分かります。よって、Next.js では module の値は ESNext に設定しておくことが望ましいです。
We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
The following mandatory changes were made to your tsconfig.json:
- module was set to esnext (for dynamic import() support)
コミットします。
$ git add .
$ git commit -m "feat: moduleをES6に設定"
Next.jsの設定考察
create next-app で作成した Next.js プロジェクトで module の esnext が設定されています。値を変更しても next dev を実行すると強制的に module の値は esnext に変更されます。よって、変更せずそのままにしておきましょう。
tsconfig.json
{
"compilerOptions": {
"module": "esnext",
}
}
まとめ
module を指定することで、どのモジュールシステムを利用するかを指定できます。この記事では、module の値を変更することで、トランスパイルされる結果が変わることを確認しました。また、Next.js のプロジェクトで module の値を変更すると、強制的に esnext に変更されることを確認しました。
参考
Discussion