以下に、自分がやった手順を記述するが、これもいつまで持つかわからない。
node.jsをインストールされていることを前提とする。
プロジェクトのルートとなるディレクトリを作り、以下を実行する。
npm init
npm i -D webpack webpack-dev-server typescript awesome-typescript-loader source-map-loader{
"compilerOptions": {
"sourceMap": true,
"target": "es5", // TSはECMAScript 5に変換
"module": "es2015" // TSのモジュールはES Modulesとして出力
}
}module.exports = {
// メインとなるJavaScriptファイル（エントリーポイント）
entry: {
main: './src/main.ts'
},
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
//path: `${__dirname}/build`,
path: `${__dirname}/public/js`,
publicPath: '/js', // webpack処理したファイルの公開時のフォルダ
// 出力ファイル名
filename: '[name].js'
},
devServer: {
contentBase: 'public' // webpack-dev-serverの公開フォルダ
},
module: {
rules: [{
// 拡張子 .ts の場合
test: /\.ts$/,
// TypeScript をコンパイルする
use: 'awesome-typescript-loader'
},
// ソースマップファイルの処理
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
// import 文で .ts ファイルを解決するため
resolve: {
extensions: ['*', '.ts', '.webpack.js', '.web.js', '.js']
},
// ソースマップを有効に
devtool: 'source-map'
};{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --inline --hot",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"awesome-typescript-loader": "^3.4.1",
"source-map-loader": "^0.2.3",
"typescript": "^2.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
}
}npm startnpm run buildnpm install --save @types/jquery
import * as $ from "jquery";npm install typescript -g
npm install webpack -g
TypeScript でフロントエンドを実装する - Syati.info
TypeScriptチュートリアル① -環境構築編- - Qiita
TypeScript2.0時代の、型定義ファイル - Qiita
npm install ts-loader --save-dev
npm i --save-dev webpack-dev-server
npm i --save-dev webpack