webpack+TypeScript+Three.jsの開発環境構築

■参考サイト

TypeScriptで始めるNode.js入門

https://ics.media/entry/4682

および

最新版TypeScript 2.4+Webpack 3の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き)>webpack+TypeScript+Three.jsの最小構成

https://ics.media/entry/16329

を参考に TypeScript+WebpackThree.js の環境を構築

■Node.js インストール

https://nodejs.org/ja/

v6.11.2 LTS推奨版 をダウンロードしてインストール

OSはWindows10 64bit

■Node.js command C:\Users\tadashi000000\workを起動し、作業フォルダに移動

スタートメニュー>Node.js>Node.js command C:\Users\tadashi000000\work

で起動

C:\Users\tadashi000000>cd C:\Users\tadashi000000\work

※ドライブが違う場合は

C:\Users\tadashi000000>D:

としてドライブ変更

■空の package.json 作成 ※このファイルはパッケージインストールすると自動的に書き換えられる

C:\Users\tadashi000000\work>npm init -y

■４つのパッケージインストール ※warningが出るがとりあえずスルー

C:\Users\tadashi000000\work>npm i -D webpack typescript awesome-typescript-loader source-map-loader

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted

{"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm WARN test@1.0.0 No description

npm WARN test@1.0.0 No repository field.

■three と @types/three をインストール ※warningが出るがとりあえずスルー

C:\Users\tadashi000000\work>npm i -S three @types/three

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0

(node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted

{"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm WARN test@1.0.0 No description

npm WARN test@1.0.0 No repository field.

■package.json の修正(一部抜粋) ※基本的にこのファイルは自動更新だがここは手作業で編集する

修正前

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

修正後

"scripts": {

"build": "webpack",

"watch": "webpack -w"

■tsconfig.json の新規作成

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

■webpack.config.js の新規作成

module.exports = {
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: './src/main.ts',
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/build`,
    // 出力ファイル名
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        // 拡張子 .ts の場合
        test: /\.ts$/,
        // TypeScript をコンパイルする
        use: 'awesome-typescript-loader'
      },
      // ソースマップファイルの処理
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  },
  // import 文で .ts ファイルを解決するため
  resolve: {
    extensions: [
      '.ts', '.js', '.json'
    ],
  },
  // ソースマップを有効に
  devtool: 'source-map'
};

■フォルダ作成

フォルダsrc作成

フォルダbuild作成

■コンパイル実行

srcフォルダにtsファイルを置いてコンパイルを実行する。 ※ここでソースファイルは webpack.config.js の entry で指定されているファイル名(ここでは main.ts)でないとエラーになるので注意

C:\Users\tadashi000000\work>npm run build

[at-loader] Using typescript@2.4.2 from typescript and "tsconfig.json" from

C:\Users\tadashi000000\work/tsconfig.json.

[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.727 sec.

Hash: 579335306593ff1f8261

Version: webpack 3.5.5

Time: 7602ms

Asset Size Chunks Chunk Names

bundle.js 2.55 kB 0 [emitted] main

bundle.js.map 2.63 kB 0 [emitted] main

[0] ./src/main.ts 45 bytes {0} [built]

成功するとbuildフォルダに bundle.js が生成される。 ※webpackは依存関係を処理し一つのJSファイルにまとめるものなのでmain.ts含め複数のjsファイルは一つの bundle.js にまとめられる