はじめに
ああ、HTML と CSS と Typescript を使ってソフト開発したいなぁ〜
ただ Typescript に HTML とか CSS が混じると環境整えるのが面倒臭くなるしなぁ
と思ってるそこのあなたのために、やるべきことをここに残しておこうと思う。
手順
グダグダ説明せず、 全ての手順を書く。上から順番に従えば HTML,CSS,typescipt 環境の完成である。
最終的な全体のディレクトリ構造がこちら。最終的にsrcフォルダの中でソフト開発を行っていく。
.
├── dist
├── node_modules
├── src
│ ├── index.css
│ ├── index.html
│ └── index.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── webpack.config.ts
1: ターミナルを開いて次の文を全てコピペしてエンターを叩く。少し時間がかかるかも。
mkdir src
touch src/index{.css,.html,.ts} webpack.config.ts
npm init -y
npm install -D typescript ts-loader webpack webpack-cli html-webpack-plugin mini-css-extract-plugin css-loader
npx tsc --init
2: src/index.ts に次の文をコピペする。
import "./index.css";
3: src/index.html に次の文をコピペする。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
</body>
</html>
4: package.json の scripts を次のように編集する。
"scripts": {
"build": "webpack",
"watch": "webpack -w",
"test": "echo \"Error: no test specified\" && exit 1"
},
5: tsconfig.json の中身を削除し、次のように編集する。
{
"compilerOptions": {
"sourceMap": true,
"target": "ES5",
"module": "ES2015"
}
}
6: webpack.config.ts に次の文をコピペする。
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const isDev = true;
module.exports = {
// モード切替
mode: isDev ? "development" : "production",
node: {
__dirname: false,
__filename: false,
},
resolve: {
extensions: [".js", ".ts", ".json"],
},
externals: ["fsevents"],
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
assetModuleFilename: "assets/[name][ext]",
},
module: {
rules: [
{
//typescript
test: /\.tsx?$/,
exclude: /node_modules/,
loader: "ts-loader",
},
{
//css
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: isDev,
},
},
],
},
{
//others
test: /\.(ico|png|jpe?g|svg|eot|woff?2?)$/,
type: "asset/resource",
},
],
},
plugins: [
new MiniCssExtractPlugin(), //cssを出力
new HtmlWebpackPlugin({ //htmlを出力
minify: !isDev,
inject: "body",
filename: "index.html",
template: "./src/index.html",
}),
],
//ファイルの変更を検知する
watch: isDev,
stats: "errors-only",
performance: { hints: false },
devtool: isDev ? "inline-source-map" : undefined,
};
環境構築は以上。あとはターミナルで
npm run build
と一回実行するだけで、その後はファイルの変更を読み取って自動でdistフォルダへ出力してくれる。
ただ新しくファイルを追加した時、 src/index.ts で import をするのをお忘れずに。
あとはGoLiveなどで dist/index.html を実行して開発スタート！！！
説明
使用したモジュールの説明
typescript - そりゃそうね
ts-loader - typescript を javascript へトランスパイルする。
html-webpack-plugin - HTMLを出力する。
mini-css-extract-plugin - CSSを出力する。
css-loader - CSS -> css-loader -> mini-css-extract-plugi のようにしてCSSが書き出される。
webpack - これらのモジュールを一つにまとめる。
webpack-cli - これがないと webpack を実行できない。
モードの切り替え
webpack.config.ts の 5行目、
const isDev = true;
を true,false で切り替えることで 開発用/本番用 の設定分けができる。
最後に
今後、Electronを使用する方法も追記しようと思う。
typescript にときめいてしまった人は是非使っていこう。
動作環境
MacOS Monterey, VisualStudioCode
参考記事
↧