Typescript와 Webpack을 함께 설정하기

최근에 저는 Typescript에 더 관심을 갖고 참여하게 되었으며 일부 JS 코드를 TS로 옮기고 있습니다.

플러그인에 불과한 내 프로젝트 중 하나에서 전체 플러그인 코드를 포함하는 거대한 JS 파일이 있었고 작업을 시작했습니다.
그래서 코드를 여러 파일로 나누기 시작했고, 그 코드를 TS로 옮기기만 하면 다른 사람들이 고마워할 것 같아서 프로젝트에 TS를 추가하기 시작했습니다.

먼저 코드를 살펴보고 논리를 기반으로 몇 가지 함수를 만들었고 항상 그렇듯이 함수형 프로그래밍의 일부 개념을 적용하여 테스트를 더 쉽게 만들려고 노력했습니다.
그런 다음 기능을 여러 파일로 이동하고 내보내기/가져오기했습니다. 하지만 내 플러그인에 대해 해당 형식을 유지해야 했기 때문에 다시 번들로 묶을 무언가가 필요했습니다.

웹팩

내 프로젝트에 추가했습니다.

yarn add webpack webpack-cli

또한 mypackage.json에 새 스크립트를 추가했습니다.

"build" : "webpack"

그런 다음 구성해야 하므로 webpack.config.js 파일을 만들었습니다.

const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => ({
  mode: argv.mode === 'production' ? 'production' : 'development',

  entry: {
    code: './src/start.ts', // The entry point for plugin code. bundle file name is 'code'
  },

  resolve: { extensions: ['.jsx', '.js'] },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
  },

  plugins: [
    new webpack.DefinePlugin({
      global: {}, // Fix missing symbol error when running in developer VM
    }),
  ],
});

테스트하면서 내 플러그인이 여전히 작동하는지 확인하기 위한 몇 가지 구성을 알아냈습니다...
훌륭합니다. yarn build를 실행한 후 다른 파일에서 내보낸 함수의 모든 코드를 포함하는 내 code.js 파일을 가져왔습니다.

타자기

좋아, 내가 유형을 확인하고 있는지 확인하기 위해 TS를 갖고 싶었습니다. 방금 .js 파일의 이름을 .ts로 바꾸기 시작한 다음 필요한 종속성을 설치했습니다.

yarn add typescript

내 프로젝트에 tsconfig.json 파일을 추가했습니다.

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "es5",
    "outDir": "./dist/",
    "sourceMap": true,
    "declaration": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "allowJs": true,
    "moduleResolution": "node",
    "strict": true,
    "typeRoots": [
      "./node_modules/@types",
    ],
    "skipLibCheck": true,
  },
  "include": ["src/**/*.ts"]
}

이제 이상한 오류가 발생했습니다. 웹팩으로 Typescript 구성을 연결해야 했기 때문에 TS에서 트랜스파일링하고 JS 파일을 번들링한 후 js 파일 출력을 얻었습니다.

Webpack 및 Typescript(ts-loader)

설치된 새 종속성이 필요함

yarn add ts-loader

내webpack.config.js를 변경했습니다.

const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => ({
  mode: argv.mode === 'production' ? 'production' : 'development',

  entry: {
    code: './src/start.ts',
  },

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

  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },

  plugins: [
    new webpack.DefinePlugin({
      global: {},
    }),
  ],
});

글쎄, 이제 yarn build 를 실행했을 때 모든 .ts 파일이 하나의 JS 파일로 번들되었고 그 옆에 유형 정의가 있었습니다.
추가로, 개발하면서 변경 사항을 확인하기 위해 다른 스크립트를 추가했습니다.

"build:watch": "npm run build -- --watch"