typescriptのみで構築してみた

webpackやnpmの仕組みを分かっていないので一番シンプルな構成でtypescriptを実装する方法を試してみる。

参考資料

以下を記事に従って環境を構築してみた。プロジェクト名はsssとして作成してみた。

1.下準備

macでnodebrewをインストールしてnode.jsをインストールする。でnpmがあるbinのpathを通す。

そしてプロジェクトを作成する。

$ cd Desktop
$ mkdir sss

2. package.jsonを生成する

以下のコマンドでpackage.jsonを生成する。

$ npm init

3. 必要なパッケージを追加

webpackとそのwebpack-cliの追加。
typescriptとts-loaderの追加。

$ npm install -D webpack webpack-cli typescript ts-loader

4. 各設定ファイルを作成、編集する

package.json、tsconfig.json、webpack.config.jsを扱う。

ファイル名	処理
package.json	編集
tsconfig.json	新規作成
webpack.config.js	新規作成

a. package.jsonの編集内容

{
  "name": "sss", 
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack -w"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^8.0.7",
    "typescript": "^4.0.3",
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0"
  },
  "private": true
}

b. tsconfig.jsonの編集内容

$ vi tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5", // TSはECMAScript 5に変換
    "module": "es2015", // TSのモジュールはES Modulesとして出力
  }
}

c. webpack.config.jsの編集内容

$ vi webpack.config.js

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: 'development',

  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: './src/main.ts',

  module: {
    rules: [
      {
        // 拡張子 .ts の場合
        test: /\.ts$/,
        // TypeScript をコンパイルする
        use: 'ts-loader',
      },
    ],
  },
  // import 文で .ts ファイルを解決するため
  // これを定義しないと import 文で拡張子を書く必要が生まれる。
  // フロントエンドの開発では拡張子を省略することが多いので、
  // 記載したほうがトラブルに巻き込まれにくい。
  resolve: {
    // 拡張子を配列で指定
    extensions: [
      '.ts', '.js',
    ],
  },
};

この状態でコンパイルしてみる

以下のコマンドでコンパイルを実行する。

$ npm run build

以下の結果が表示される。

> sss@1.0.0 build /Users/user/Desktop/sss
> webpack

[webpack-cli] Compilation finished
assets by status 0 bytes [cached] 1 asset

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/user/Desktop/sss'

webpack 5.2.0 compiled with 1 error in 187 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sss@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sss@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2020-10-24T12_07_51_536Z-debug.log

ERROR in main Module not found: Error: Can't resolve './src' in '/Users/user/Desktop/sss'

結果の中盤で以下のようなエラーが表示される。これはどうやら、sssというプロジェクトにsrcというディレクトリが見つからなかったからエラーが出た。

てことでsrcディレクトリを実行する。

$ mkdir src

ついでsrc以下にコンパイル対象のtypescriptファイルを作成する。

$ vi src/main.ts
$ vi src/sub.ts

再度コンパイルしてみる

$ npm run build

結果

> sss@1.0.0 build /Users/user/Desktop/sss
> webpack

[webpack-cli] Compilation finished
asset main.js 827 bytes [emitted] (name: main)
./src/main.ts 1 bytes [built] [code generated]
webpack 5.2.0 compiled successfully in 1729 ms

分かったこと

コンパイルが成功すると、プロジェクトルートにdistディレクトリが生成される。でjavascriptファイルが出力される。出力ファイル名はどのようにして決定されるのか？これはどうやらwebpack.config.jsのoutputの項目で定めることができるのではないかと思われるが、実際に試せていない。

またwebpack.config.jsで定められるentryのキーはsrc以下にコンパイル対象のtypescriptファイルを指定する。

entry: './src/main.ts',

サンプルコードをおいておく

https://github.com/chiaki1990/simple_typescript

diadia

興味があることをやってみる。自分のメモを残しておきます。