【ドット絵エディタ制作】１回目：開発環境を整える

on 投稿日:

前回の冒頭で、「Javascriptはわかる」風な書き方をしたが
開発の仕事をしていたのは、もう１０年以上前の話で
最近のセオリーなど全く知らない。

なので、勉強を兼ねて最近っぽい開発環境を整えるところから始める。

以降は、開発環境を整えるためのコマンドや設定内容。

package.jsonファイルを作成

npm init -yes

package.jsonが無いと以降のコマンドがエラーになるので、とりあえず作る。

各種npmモジュールのインストール

WebpackとTypeScript

npm i webpack webpack-cli typescript ts-loader terser-webpack-plugin

TerserPluginのインストールして、console.logを削除できるように。

SCSS

npm i sass-loader sass css-loader webpack-fix-style-only-entries postcss-loader autoprefixer mini-css-extract-plugin

Autoprefixer もインストールして、ベンダープレフィックスに対応。

CreateJS

npm i createjs @types/createjs

描画領域にはCanvasを利用する作るつもりなので、Canvasを操作しやすくするために。

Bootstrap

npm i bootstrap @types/bootstrap

ボタンなどのUIのためにとりあえず入れとく。

設定ファイルの内容

package.jsonファイル

{
  "name": "doteditor",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "pro"	: "webpack --mode production",
    "dev"	: "webpack --mode development",
    "watch"	: "webpack --mode development --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    ・・・
  },
  "browserslist": [
    "last 2 version",
    "not ie <= 11"
  ]
}

tsconfig.jsonファイル

{
	"compilerOptions": {
		"target": "es2020",
		"module": "esnext",
		"typeRoots": [
			"./node_modules/@types"
		],
		"noImplicitOverride": true
	}
}

webpack.config.jsファイル

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
module.exports = (env, argv) => {
    return {
        // 実行の入り口となるファイルを指定
        entry: './src/ts/script.ts',
        // 出力ファイル
        output: {
            // OSに依存しない絶対パス指定
            path: path.resolve(__dirname, 'dist/js'),
            filename: 'script.js'
        },
        // ソースマップ出力
        devtool: (argv.mode == 'production') ? false : 'source-map',
        // import時の拡張子の表記を省略する拡張子を指定
        resolve: {
            extensions: ['.ts']
        },
        module: {
            rules: [
                {
                    // 拡張子 .ts の場合
                    test: /\.ts$/,
                    // TypeScript をコンパイルする
                    use: 'ts-loader'
                },
                {
                    //正規表現で該当するファイルを指定
                    test: /\.scss$/,
                    use: [
                        {
                            // CSSファイルを書き出すオプションを有効にする
                            loader: MiniCssExtractPlugin.loader
                        },
                        
                        {
                            //CSSをJavaScriptにバンドル
                            loader: 'css-loader',
                            options: {
                                url: false,
                                sourceMap: true,
                            }
                        },
                        {
                            //ベンダープレフィックスを毎度記述
                            loader: "postcss-loader",
                            options: {
                                postcssOptions: {
                                    plugins: [
                                        require('autoprefixer')({ grid: true })
                                    ],
                                },
                            },
                        },
                        {
                            //SassをCSSに変換
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                // 出力先の設定
                filename: '../css/style.css'
            }),
            //不要なファイルを削除
            new FixStyleOnlyEntriesPlugin(),
            new TerserPlugin({
                terserOptions: {
                    //productionモードのときにconsole.logを削除
                    compress: { drop_console: (argv.mode == 'production') ? true : false }
                }
            })
        ]
    }
}

コンパイル

production（本番）モード

npm run pro

console.log削除、minify

development（開発）モード

npm run dev

console.logやソースマップを出力。

watch（監視）モード

npm run watch

ファイルの変更を監視し、変更があると自動的に development（開発）モードを実行する。
監視をやめるにはターミナルで Ctrl + C。

ひとこと

watchモード、超便利。