TypeScriptとwebpackとVSCodeで開発するメモ

VSCode で webpack を使った TypeScript の開発環境のセットアップメモです。

WebPack のインストール

コンソールで以下のコマンドを実行。

npm init -y
npm install webpack webpack-cli ts-loader typescript

git で無視する子たち

node_modules
package-lock.json

tsconfig.json を設定

これがないと、TypeScript のコンパイルに失敗する。

コード1: tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "",
        "declaration": true,
        "declarationDir": "type",
        "lib": [
            "dom",
            "es5",
            "scripthost",
            "es2015.promise",
            "es2015.collection"
        ],
    }
}

webpack.config.js を設定

コード2: webpack.config.js

var path = require('path');
var test = {
    mode: 'production',
    target: 'web',
    entry: path.join(__dirname, 'src' ,'test'),
    output: {
        filename: 'sumire-test.js',
        path: path.resolve(__dirname),
        // ライブラリ
        library: ['SumireTest'],
        libraryTarget: 'umd'
    },
    node: {
        __dirname: false,
        __filename: false
    },
    module: {
        rules: [{
                test: /.ts?$/,
                include: [
                    path.resolve(__dirname, 'src'),
                ],
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                ],
                loader: 'ts-loader',
            }]
    },
    resolve: {
        extensions: ['.js', '.ts']
    },
    //devtool:"source-map",
};
module.exports = [
    test
];

ライブラリを作る場合は、output に library と libraryTarget を設定する。その名前で、公開関数（export した関数）にアクセスできるようになる。

	// 上記の設定であれば、SumireTestにメンバが定義される
	var ret = SumireTest.TestFunction();

package.json に scripts を追加する

scripts に webpack の起動コマンドを設定しておく。

コード3: package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --progress --colors --watch"
  }
}

tasks.json に package.json に設定した scripts を設定する

コード4: tasks.json

{
    "version": "2.0.0",
    "tasks": [
      {
        "type": "npm",
        "script": "build",
        "problemMatcher": ["$eslint-stylish"]
      }
    ]
  }

jquery の型情報を入れる

npm で型情報をインストールする

npm install jquery @types/jquery