あじちゃんの備忘録。

〜ここはメモ帳です

トップ > TypeScript > webpack3環境下でvueを動かしてる状態からtypescriptを導入する

webpack3環境下でvueを動かしてる状態からtypescriptを導入する

TypeScript webpack

手順

  • typescriptを入れる
    • $ yarn add --dev typescript ts-loader@3.5.0
    • ts-loaderはwebpack 3に対応している v3.5.0を入れる必要あり
  • vue-cliが入っていることを確認
    • $ vue --version
    • 入っていなければインストール（yarn global add vue-cli）
  • インストールされた /node_modules/ts-loader/README.md を読みつつ進める


１. webpack.config.js を以下のように作成or追記

        module.exports = {
        devtool: 'inline-source-map',
        entry: './app.ts',
        output: {
            filename: 'bundle.js'
        },
        resolve: {
            // Add `.ts` and `.tsx` as a resolvable extension.
            extensions: ['.ts', '.tsx', '.js']
        },
        module: {
            rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            { test: /\.tsx?$/, loader: 'ts-loader' }
            ]
        }
        }

２. tsconfig.json に以下を追加

        {
        "compilerOptions": {
            "sourceMap": true
            }
        }
  • あとは目的ファイルを .ts にリネームして webpack.mix.js を更新する
  • $ npm run dev

参考にしたサイト