Humanity

Edit the world by your favorite way

TypeScript + Webpack 使った時に出たエラーと対処したこと

TypeScript Webpack

loaders に loader を指定する時は test プロパティのパターンで絞り込むこと

html-loader を使おうと思って .html のファイルを require() したら、ts-loader に渡って解釈されてしまったので、絶対つけること。 当たり前っぽいけどこれでハマったので。

ERROR in ./src/component/root-index.html
Module build failed: Error: Could not find file: 'C:\msys64\home\tyru\git\scrader\src\component\root-index.html'.
    at getValidSourceFile (C:\msys64\home\tyru\git\scrader\node_modules\typescript\lib\typescript.js:79277:23)
    at Object.getEmitOutput (C:\msys64\home\tyru\git\scrader\node_modules\typescript\lib\typescript.js:79644:30)
    at getEmit (C:\msys64\home\tyru\git\scrader\node_modules\ts-loader\dist\index.js:99:43)
    at Object.loader (C:\msys64\home\tyru\git\scrader\node_modules\ts-loader\dist\index.js:27:11)
 @ ./src/component/root-index.ts 11:14-42
 @ multi ./src/init.ts ./src/component/root-index.ts ./src/routes.ts
module.exports = {

  // ...

  module: {
    loaders: [
      {
        test: /\.ts$/,     // これを必ずつける
        exclude: /(node_modules)/,
        loader: 'ts-loader'
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        query: {
          minimize: true
        }
      }
    ]
  }
}

「error TS2304: Cannot find name ‘require'」と言われる時は require() の型宣言をしてやること

declare function require(x: string): any;

このような型宣言をしないと、以下のようなエラーが出る。

ERROR in ./src/component/root-index.ts
(12,15): error TS2304: Cannot find name 'require'.

以下のような通常の require() をしてる時は必要ないみたいだけど、

import angular = require('angular');
import 'angular-ui-router';
angular.module('scrader', ['ui.router']);

このように式の中？で require() をすると型宣言が必要になる。 正直 TypeScript 力が低すぎてよく分かってない。

// 以下の1行がないとコンパイルエラー！！
declare function require(x: string): any;

class RootIndex {
  msg: string;
  constructor() {
    this.msg = 'Hello!';
  }
}

angular.module('scrader')
  .component('rootIndex', {
    template: require('./root-index.html'),
    // template: `<div ng-bind='$ctrl.msg'></div>`,
    controller: [RootIndex]
  });

WebPack と html-loader 便利すぎる。 Gulp より「コード」っぽい設定を書かずに済むし、loader めっちゃ便利だし、WebPack 大好きになってきた。 require() でコードに事前に*1色々埋め込める仕組みというのが気に入った。

参考記事

Special Thanks

*1:「静的に」と言っていいんだろうか？