TypeScriptを変換して生成される複数のJavaScriptファイルを、1つのJavaScriptファイルにまとめる方法
■ Node.jsをインストールする
https://nodejs.org/ja/
インスートルするのは、xx.xx.xx LTS (推奨版)
xx.xx.xxは、バージョン数
■ TypeScriptをインストールする
コマンドプロンプトで、下記コマンドを実行する
npm install -g typescript
■ プロジェクトのフォルダを作成する
■ Visual Studio Codeで、プロジェクトのフォルダを開く
■ プロジェクトのフォルダのルートに、tsconfig.jsonファイルを作成する
tsconfig.jsonファイルの内容
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"watch": true,
"sourceMap": true,
// TypeScriptがJavaScriptに変換されたファイルを保存するフォルダ名を指定。
// 例として、javascriptとした。
// tsconfig.jsonファイルを起点としたパスを指定する
"outDir": "javascript"
}
}
■ task.jsonファイルを作成する
[ターミナル] - [既定のビルドタスクの構成] - [tsc: ビルド]
.vscodeフォルダが作成されて、その中にtask.jsonファイルが作成される
■ プロジェクトフォルダのルートに、TypeScriptファイルを作成するtypescriptフォルダを作成する
■ TypeScriptファイルの例
typescript/index.tsファイル
import { Sub } from "./sub";
new Sub();
typescript/sub.tsファイル
export class Sub {
constructor() {
document.write("Sub");
}
}
■ TypeScriptファイルをJavaScriptファイルに変換する
[Shift] + [Ctrl] + [b]でビルドする
ビルドが完了すると、
tsconfig.jsonファイルの"outDir"に指定したフォルダにJavaScriptファイルと、mapファイルが作成される
javascript/index.js
javascript/index.js.map
javascript/sub.js
javascript/sub.js.map
tsconfig.jsonファイルの"watch": trueに設定しているため、ビルドが監視モードになっているので、
ここでは一旦停止させる
[Ctrl] + [c]
バッチ ジョブを終了しますか (Y/N)?
で、yを入力する
■ Visual Studio Codeで新しいターミナルを起動する
[ターミナル] - [新しいターミナル]
カレントディレクトリが、プロジェクトフォルダのルートでターミナルが起動される
■ package.jsonファイルを作成する
ターミナルに、
npm init -y
と入力する
■ webpackと、webpack-cliと、webpack-dev-serverをインストールする
ターミナルに、
npm install --save-dev webpack webpack-cli webpack-dev-server
と入力する
※ 省略形
npm i -D webpack webpack-cli webpack-dev-server
インストールが完了すると、
・node_modulesフォルダ
・package-lock.jsonファイル
が作成される
■ package.jsonファイルを編集する
package.jsonファイルの"scripts"の箇所を下記のように記述する
{
"name": "test3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development && webpack-dev-server --mode development",
"product": "webpack --mode production && webpack-dev-server --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
}
}
■ 複数のJavaScriptファイルを1つにまとめるファイルを出力するフォルダを作成する
プロジェクトフォルダのルートにdistフォルダを作成する
■ webpack.config.jsファイルを作成する
プロジェクトフォルダのルートに、webpack.config.jsファイルを作成する
const path = require('path');
module.exports = {
// JavaScriptのメインファイル（エントリーポイント）
entry: "./javascript/index.js",
output: {
// ファイルを出力するフォルダ名
path: path.join(__dirname, 'dist/js'),
publicPath: "/js/", // これを定義すると、TypeScriptを編集し、セーブをしたタイミングでビルドした内容がブラウザに反映される
// 出力ファイル名
// このファイルが、複数のJavaScriptファイルが1つにまとまったファイルです
filename: "bundle.js"
},
devServer: {
// webpack-dev-serverのバージョン4.x.xからは、staticになった
// ※ webpack-dev-serverのバージョンか3.x.xでは、contentBaseだった
static: "dist",
open: true
}
};
■ ブラウザに表示させるためのindex.htmlを作成する
上記で作成したdistフォルダ内に、index.htmlを作成する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<script src="js/bundle.js"></script>
</head>
<body>
</body>
</html>
■ webpackと、webpack-dev-serverを起動する
package.jsonファイルの"scripts"で指定した"dev":～～～～～～のコマンドを実行する
npm run dev
少々待つと、dist/jsフォルダ内に、bundle.jsが生成される
そして、webpackと、webpack-dev-serverが起動して、その後ブラウザが起動されindex.htmlが表示される
今回のサンプルでは、画面にSubと表示されます。
"dev":～～～～～～のコマンドは、開発時に使用します。
■ リリース用
リリース用のファイルを出力する場合は、package.jsonファイルの"scripts"で指定した"product":～～～～のコマンドを実行します。
npm run product
出力されるbundle.jsが、コメントや改行がない縮小されたファイルで出力されます
■ Visual Studio Codeビルドを監視モードで起動
[Shift] + [Ctrl] + [b]でビルド開始する
tsconfig.jsonファイルの"watch": trueに設定しているため、ビルドが監視モードになっているため
TypeScriptファイルを編集して、ファイルを保存すると自動でビルドされ、ブラウザに反映される
監視モードを停止するには、
[Ctrl] + [c]
バッチ ジョブを終了しますか (Y/N)?
で、yを入力する
[Ctrl] + [c]で監視モードを停止した後、再び監視モードを起動するには、
[Shift] + [Ctrl] + [b]
More than 1 year has passed since last update.
importを使用しているTypeScriptで、変換して生成される複数のJavaScriptファイルを、WebPackで1つのJavaScriptファイルにまとめる方法 VisualStudioCode
Last updated at Posted at 2019-11-27
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme