今までのあらすじ
既に誰かが作ったプロジェクトを動かしたり触ったりすることはできたけど、そもそも新規プロジェクトを作成するにはどうすんの？ということでこの記事が決定版
覚えて置く必要は無いけどやり方知らないとつらい。
以下、全て最小構成
環境
| Version | ||
|---|---|---|
| OS | Windows 10 | |
| EDI | VSCode | ? |
手順
初期化
npm init
terminal
npm init
package.jsonが作成されます。
このプロジェクトがnpmの管理下に置かれます。
プロジェクトの基本的な情報が入ってます。
インストールしたパッケージが追加されていきます。
TypeScript
TypeScriptのインストール
terminal
npm install --save-dev typescript
node_modulesの配下にts系のライブラリをインストールする
TypeScript初期化
terminal
tsc --init
tsconfig.jsonを作成する
Webpack
webpackのインストール
terminal
npm install --save-dev webpack webpack-cli ts-loader
おなじみwebpackのインストール
webpack.config.jsの作成
{homedirectory}/webpack.config.js
module.exports = {
mode: "development",
entry: "./typescript/script.js"
};
最小構成
他にも色々できる
時間があれば公式ドキュメント見たほうが良い
ググれば日本語で解説してるページも出てくる
index.html作成
サンプル
{homedirectory}/index.html
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>a!</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
(最小構成じゃない....)
キャラセットにutf-8を指定してたり
サーバーのファイルを更新した時にブラウザキャッシュが残らないようにしてたり
してるけど実質最小構成
script.ts(名前は何でもよい)の作成
{homedirectory}/typescript/script.ts
console.log('a!');
コンソールにa!と表示させます
script.tsでなくても問題無いけど、その場合はwebpack.config.jsを修正せなあかんです。
小休止
ここまで終われば後は必要なパッケージを入れるだけ
pixi.jsインストール
terminal
npm install @types/pixi.js --save-dev
npm install pixi.js + npm install @types/pixi.jsでも良い。変わらんけど
--save-devはローカルインストールを表す
終わり
あとはいつものビルドコマンド+Live Server
ブラウザのコンソールに出力される
