Kugelblitz

いつ何時誰の挑戦でも受ける!

TypeScript開発環境のメモ

TypeScriptの開発環境のメモ

以下のサイトを参考にしたが、すでに古くなっている。
TypeScriptチュートリアル① -環境構築編-
最新版TypeScript 2.6+Webpack 3の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き)

以下に、自分がやった手順を記述するが、これもいつまで持つかわからない。

node.jsをインストールされていることを前提とする。

プロジェクトのルートとなるディレクトリを作り、以下を実行する。

npm init
npm i -D webpack webpack-dev-server typescript awesome-typescript-loader source-map-loader

tsconfig.jsonを作成する。

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5", // TSはECMAScript 5に変換
    "module": "es2015" // TSのモジュールはES Modulesとして出力
  }
}

webpack.config.jsを作成する。

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'
};

pakage.jsonはnpm initで作成されているので、scripts内を書き換え

{
    "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"
    }
}

開発サーバ起動。http://localhost:8080

npm start

ビルド

npm run build
npm install --save @types/jquery
import * as $ from "jquery";

以下未整理

npm install typescript -g

npm install webpack -g

http://blog.syati.info/post/typescript_webpack/

https://qiita.com/ochiochi/items/efdaa0ae7d8c972c8103

https://qiita.com/kohashi/items/d7a8ff57fe3a3e4c95f4

npm install ts-loader --save-dev

npm i --save-dev webpack-dev-server
npm i --save-dev webpack

Pocket

他の記事