環境ごとに分けたtsconfigを作成する

環境ごとに分けたtsconfigを設定する

想定するのはdevelop環境とprod環境の２つの設定を分けて管理します。

dev環境では、sourceMap: trueで、prod環境ではsourceMap: falseとします。

製品として出すのに元のソースを出すのはかっこ悪いので。。。

devとprodの設定を作成する

tsconfig.dev.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",  // TSはECMAScript 5に変換
    "module": "es2015",  // TSのモジュールはES Modulesとして出力
    "moduleResolution": "node",  // node_modules からライブラリを読み込む
  }
}

tsconfig.prod.json

{
  "compilerOptions": {
    "sourceMap": false,
    "target": "es5",  // TSはECMAScript 5に変換
    "module": "es2015",  // TSのモジュールはES Modulesとして出力
    "moduleResolution": "node",  // node_modules からライブラリを読み込む
  }
}

webpackのdev設定を作成する

これについてはwebpack-mergeを使用して分けます。

一つのファイルで実現する方法が思いつきませんでした。

webpack.config.dev.jsを作成します。

// 開発用のコンフィグファイル

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base');
// ↑ baseとなるconfigを読み込みます。

// webpack-base.config.jsに同様の設定値がある場合、こちらが優先される。
// baseの設定ファイルをマージします。マージにはwebpack-mergeというライブラリを使ってます。
const devConfig = merge(baseConfig, {
    devtool: 'inline-source-map',
});
devConfig.module.rules.push({
    // 拡張子 .ts の場合
    test: /\.ts$/,
    // TypeScript をコンパイルする
    loader: "ts-loader",
    options: {
        configFile: 'tsconfig.dev.json'
    }
})

module.exports = devConfig;

ここで大事なのは、devConfig.module.rulesにpushしていることです。

ruleを上書きしないようにしています。

次に、webpack.config.base.jsを作成します。

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const jsRoot = './js';

function makePath(...paths) {
    return path.resolve(__dirname, paths.join('/'));
}

const baseConfig = {
    // エントリーポイントの設定
    entry: {
        'reset': makePath(jsRoot, 'reset.js'),
    },
    // 出力の設定
    output: {
        // 出力するファイル名
        filename: '[name].bundle.js',
        // 出力パス
        path: `${__dirname}/../static/js`,
        publicPath: '/static/js/'
    },
    module: {
        rules: [
          // いろいろな設定を追加する。
        ]
    },
    resolve: {
        extensions: [".ts", ".js"]
    },
    target: 'electron-main',
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: `${__dirname}/static/js/*`
        }),
    ]
};

module.exports = baseConfig;

package.jsonのscriptを作成する

これについてはwebpackを使っている方にとってはよく見るスクリプトかと思います。

{
  "scripts": {
    "webpack-dev": "webpack --config ./webpack.config.dev.js --mode development --progress --display-error-details",
    "webpack-production": "webpack --config ./webpack.config.production.js --mode production --progress --display-error-details"
  }
}

実行する

npm run webpack-devで実行すると、.tsが.jsで出力されます。

当初はtscを使うのかと思ってました。