文書ディレクトリ

初期化項目

ディレクトリ構造

webpack構成

コードチェック仕様eslint構成

テスト環境構築

プロジェクトアドレス

プロジェクトの初期化

作成ファイルts-demonpm init -y
npm i typescript -D
ts構成項目の初期化
npx tsc --init

ディレクトリ構造

ts-demo
│   README.md 
│
└───build
│   │   webpack.base.config.js
│   │   webpack.config.js
│   │   webpack.pro.config.js
|   |   webpack.dev.config.js
│   
└───public
|   |  index.html
|   |
└───src
|    │   template
|    │   test
|
└─── .eslintrc.js
└─── tsconfig.json
|
└─── REAME.md

Webpack構成

buildディレクトリ構築webpack npm install --save-dev webpack webpack-cli webpack-dev-server ts-loader html-webpack-plugin webpack-merge clean-webpack-plugin
入口構成webpack.config.js

const merge = require('webpack-merge');
const basicConfig=require('./webpack.base.config');
const devConfig=require('./webpack.dev.config');
const prodConfig=require('./webpack.pro.config')

const config=process.NODE_ENV==='development'?devConfig:prodConfig;

module.exports=merge(basicConfig,config)

基本構成webpack.base.config.js

const path=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    entry:{
      app:'./src/index.ts'
    },
  
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    module: {
        rules: [  
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
          }
        ]
      },
    plugins:[
        new HtmlWebpackPlugin({
            title:'webpack-ts-deno',
            template:'./src/template/index.html'
        })
    ],
    output:{
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../dist')
    }
}

開発環境構成webpack.dev.config.js

const { CleanWebpackPlugin } =require('clean-webpack-plugin');

module.exports={
    plugins:[
        new  CleanWebpackPlugin(),
    ]
}

生産環境構成webpack.pro.config.js

module.exports={
    devtool: 'cheap-module-eval-source-map',
}

package.jsonスクリプトの変更

"scripts": {
    "dev": "webpack-dev-server --mode=development --config  ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js"
  }

コードチェック仕様eslint構成

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
@typescript-eslint/parserはeslint解析ts eslint
npx eslint --init

module.exports = {
    "parser": "@typescript-eslint/parser",  
    "parserOptions": {
        "project":"./tsconfig.json",
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "extends":[
      "plugin:@typescript-eslint/recommended"
    ],
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

スクリプトの追加package.json

"scripts": {
 "lint":"eslint src --ext .js,.ts",
}

テスト環境構築

npm i jest ts-jest
jestプロファイルの生成
npx ts-jest config:init
スクリプトの追加package.json

"scripts": {
 "test":"jest",
}