BETA

TypeScriptをコンパイルしてwebpackで一つにまとめる

投稿日:2019-12-30
最終更新:2019-12-30

手順メモ

前提

ディレクトリ名 用途
./src ソースディレクトリ
./build ts -> js にトランスパイルされたものを仮置きするディレクトリ
./public/lib/ 実際にブラウザが読み込むjsを置くディレクトリ

必要なものをインストール

  • npm i typescript -g
  • npm i webpack -g
  • npm i webpack-cli -g

typescript→javascript準備

tsconfig.json編集

{  
  "compilerOptions": {  
      "experimentalDecorators": true,  
    "module": "commonjs",  
    "noImplicitReturns": true,  
    "noUnusedLocals": true,  
    "outDir": "./build/",         ※ ここだけ直す  
    "sourceMap": true,  
    "strict": true,  
    "target": "es2017"  
  },  
  "compileOnSave": true,  
  "include": [  
    "src",  
  ]  
}  

テスト

srcに適当に index.ts のようなファイルを置いて、 tsc を実行する。
./build/index.js が出来ていればOK。複数ファイル置いても全部トランスパイルされることを
確認する。

javascriptを1ファイルにパックする

webpack.config.js 編集

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく  
const path = require('path');  

module.exports = {  
  // development or production。  
  mode: 'development',  
  resolve: {  
    alias: {  
      // vue はフルコンパイラー入りが必要  
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1  
    }  
  },  
  // エントリーポイントの設定  
  entry: './build/index.js',  
  // 出力の設定  
  output: {  
    // 出力するファイル名  
    filename: 'index.js',  
    // 出力先のパス  
    path: path.join(__dirname, './public/lib')  
  }  
};  

テスト

webpack を実行すると ./public/lib/index.js が出力されることを確認する。

蛇足

一番書きたかったのはここ

変更したらいちいち手動でコンパイルするの?

少しの間手動でやっていたのですが面倒過ぎます。
なのでどうにかしようと思います。…ファイルの変更を監視するオプションは tsc にはありません。
webpackにはあります。と言うことは、 typescriptのトランスパイルもwebpackにやって貰う必要があります。

webpack用 ts-loaderをインストール

  • npm i ts-loader --save-dev
  • npm i typescript --save-dev

webpackでtypescriptをトランスパイルする設定

webpack.config.jsに以下を加えます。蛇足ですが、カンマ等にはお気を付け下さい。

// 追加  
  resolve: {    
    extensions: ['.ts', '.js'],  
  },  

// 追加  
  module: {  
    rules: [  
      {  
        test: /\.tsx?$/,  
        use: [  
          {loader: 'ts-loader'}  
        ]  
      }  
    ]  
  }  

// 変更。tscによりトランスパイルされたjsではなく、tsを直接見る  
  //entry: './build/main/main.js',  
  entry: './main/main.ts',  

webpackによるトランスパイルテスト

webpack で、トランスパイルまで行われることを確認する。
tsc + webpack と出力は変わらない。

ソース変更を監視させる

webpack --watch
これでソースの変更を監視して自動でトランスパイル等をやってくれるようになる。

vue cli で作ったプロジェクトをwebpackでやろうとしたらコケた

  • @Prop() private msg!: string;
  • TS6133: 'msg' is declared but its value is never read.

privateではなく、protectedにすればよい。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

Webアプリケーション書いてます。インフラもやります。 私の投稿内の設定、コマンド、プログラム、スクリプト等は、商用、非商用を問わずご自由にお使い下さい。当方の著作権表示・許可等は一切不要です。 ただし、内容についていかなる保証もありません。(誤り指摘歓迎します)

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう