왜 Webpack 설정은 TypeScript로 쓸 수 있습니까?

이 보도에 관하여

는 웹 패키지의 설정 파일webpack.config.js로, Type Script로 Node를 씁니다.js에서 실행할 수 있습니다.그러나 원래 Type Script의 소스 코드는 Node입니다.js로 실행할 수 없을 거예요.이 일에 신경을 많이 쓴 제가 이번에 그 구조를 조사해서 이 기회를 빌려 그 조사 결과를 공유하고 싶었어요.💪
인용하다
https://webpack.js.org/configuration/configuration-languages/

문장 요약

개요만 알고 싶은 사람을 대상으로 본문에서 해설한 내용을 총결해 보겠습니다👇

webpack-cli에서 rechoir를 사용하여 Type Scriptrequire()를 사용할 수 있습니다

rechoir사용ts-node등으로 확장require.extensions오

그나저나 저는 추천하지 않습니다require.extensions

웹팩-cli에 대응하는 언어를 node-interpret에서 확인할 수 있습니다

이 글의 후반부에는 require.extensions를 사용할 수 있다YAMLrequire().

웹 팩-cli 설치 보기

우선 webpack-cli의 설치를 살펴보겠습니다.
이하 인용프로필 부분의 원본 코드 읽기.
공식 저장소 참조

const loadConfig = async (configPath) => {
  const { interpret } = this.utils;
  const ext = path.extname(configPath);
  const interpreted = Object.keys(interpret.jsVariants).find(
    (variant) => variant === ext
  );

  if (interpreted) {
    const { rechoir } = this.utils;

    try {
      rechoir.prepare(interpret.extensions, configPath);
    } catch (error) {
      if (error.failures) {
        this.logger.error(`Unable load '${configPath}'`);
        this.logger.error(error.message);

        error.failures.forEach((failure) => {
          this.logger.error(failure.error.message);
        });
        this.logger.error("Please install one of them");
        process.exit(2);
      }

      this.logger.error(error);
      process.exit(2);
    }
  }

  let options;

  try {
    options = await this.tryRequireThenImport(configPath, false);
  } catch (error) {
    this.logger.error(`Failed to load '${configPath}' config`);

    if (this.isValidationError(error)) {
      this.logger.error(error.message);
    } else {
      this.logger.error(error);
    }

    process.exit(2);
  }

  return { options, path: configPath };
};

여러 가지 일을 했지만 상술한 소스 코드가 한 일을 총괄하면

설정 파일을 로드하기 위한 사전 처리

설정 파일의 마운트 처리

두 부류로 나누다.
'2. 설정 파일의 마운트 처리'여러분은 파일 경로와 확장자require() 또는require()만 보십시오. 따라서 본고는'1. 설정 파일의 예처리'만 설명합니다.
다음은 이 소스 코드를 발췌한 것이다.👇
상기 소스 코드에서 발췌하다

const { interpret } = this.utils;
const ext = path.extname(configPath);
const interpreted = Object.keys(interpret.jsVariants).find(
  (variant) => variant === ext
);

if (interpreted) {
  const { rechoir } = this.utils;

  try {
    rechoir.prepare(interpret.extensions, configPath);
  } catch (error) {
    if (error.failures) {
      this.logger.error(`Unable load '${configPath}'`);
      this.logger.error(error.message);

      error.failures.forEach((failure) => {
        this.logger.error(failure.error.message);
      });
      this.logger.error("Please install one of them");
      process.exit(2);
    }

    this.logger.error(error);
    process.exit(2);
  }
}

일단 첫 번째 줄을 보도록 하겠습니다.👀

const { interpret } = this.utils;

갑자기 잘 모르는 것이 생겼어요. 이것은 interpret의 프로그램 라이브러리예요.
이 라이브러리는 파일 확장자와 연결된 스크롤 바 정보의 대상을 제공합니다.예를 들어, Type Script의 경우
interpret의 원본 코드에서 발췌

{
  '.ts': [
    'ts-node/register',
    'typescript-node/register',
    'typescript-register',
    'typescript-require',
    'sucrase/register/ts',
    {
      module: '@babel/register',
      register: function(hook) {
        hook({
          extensions: '.ts',
          rootMode: 'upward-optional',
          ignore: [ignoreNonBabelAndNodeModules],
        });
      },
    },
  ],
}

이런 상황입니다.
두 번째 줄 이후의 부분은 설정 파일import()의 확장자를 얻어 확장자가 interpret에 정의되었는지 판단합니다.[1]
interpret이 설정 파일의 확장자에 대응하는지 판단합니다

const ext = path.extname(configPath);
const interpreted = Object.keys(interpret.jsVariants).find(
  (variant) => variant === ext
);

또한 확장자에 대응하는 물건이라면 마운트 정보를 사용하여 처리합니다.
다음 섹션👇
interpret의 마운트 정보 처리를 사용하는 부분

if (interpreted) {
  const { rechoir } = this.utils;

  try {
    rechoir.prepare(interpret.extensions, configPath);
  } catch (error) {
    /* -- 今回は関係ないので省略 -- */
  }
}

소스 코드를 보고 또 webpack.config.*라는 잘 모르는 것이 나타났다.그러나 이것도 interpret와 마찬가지로 프로그램 라이브러리다.
이 rechoir는 전달된 스크롤 바 정보rechoir를 바탕으로 require.extensions에 스크롤 바를 설정합니다.
이렇게 하면 interpret.extensions 파일 등 통상적으로 대응하지 않는 확장자 파일에 마운트를 적용할 수 있기 때문에 .ts 등 파일webpack.config.ts을 사용할 수 있다.

총결산

여기까지 정리하자면.

interpret를 사용하여 마운트 정보 얻기

설정 파일의 확장자interpret가 해당하는지 확인

가 대응하는 경우 rechoir를 사용하여 require.extensions에 롤러

를 등록합니다.

설정 파일 로드require()

이런 흐름.
이렇게 되면 "웹 팩의 설정 파일을 왜 Type Script로 쓸 수 있을까요?"이 수수께끼는 이미 해결되었다!
하지만 이 수수께끼를 풀 webpack.config.*에 대한 설명이 없으니 자세한 상황을 살펴보자.👉

require.extensions란 무엇입니까?

require.extensions는 특정한 확장자를 정의하는 처리 방법에 사용되는 물건이다.이 API를 사용하여 일반적으로 해당되지 않는 확장자 파일을 노드로 설정합니다.jsrequire.extensions에서 할 수 있습니다.
이번 경우처럼 Type Script의 소스 코드require()를 사용하려면 ts-node 등 프로그램 라이브러리를 사용하여 간단하게👇
.ts 파일 requrie()

require('ts-node/register');

// TypeScriptで書かれた設定情報を読み込む
const config = require('./config.ts');

상당히 편리한 API지만, 사실 이것은 추천하지 않습니다.
이유는 Node.js 문서에 쓰여 있으니 인용을 허락해 주십시오.
Deprecated. In the past, this list has been used to load non-JavaScript modules into Node.js by compiling them on-demand. However, in practice, there are much better ways to do this, such as loading modules via some other Node.js program, or compiling them to JavaScript ahead of time.
요컨대
"처리가 느려질 수 있으니 미리 컴파일하거나 다른 방법으로 처리하세요!"
듣건대응, 특별히 운행 시간에 컴파일하면 실행하기 전에 컴파일하는 것이 좋겠어.
공식적으로 추천하지 않는 물건이기 때문에 너무 많이 쓰지 않는 게 좋을 것 같아요. 그런데 이렇게 편리한 API를 알게 되면 프로그래머의 성격은 이걸로 놀고 싶은 거죠.
그래서 저는 require()를 사용하여 require.extensions 파일을 만들고 싶습니다.yaml!

파일을 엽니다.능숙하게 하다

필요한 모듈을 먼저 설치합니다.
설치yaml

$> npm i --save yaml

그리고 이어서 require() 처리를 쓰겠습니다.🖊
./yaml-setup.js

const fs = require("fs")
const YAML = require('yaml')

// `.yaml`ファイルをrequire()できるようにする
require.extensions[".yaml"] = function (module, filename)  {
  const code = fs.readFileSync(filename, "utf8") // ファイルを読み込む

  module.exports = YAML.parse(code) // ファイルを解析してJSONとして返す
}

만약 상기 파일이 완성된다면, 아래 기술require.extensions의 파일과 require()의 읽기 파일.yaml의 파일입니다.
./target.yaml(require의 yaml 파일)

Hello:
  - World

./index.js

const yamlData = require("./target.yaml") // 上記で定義したファイル

console.log(`出力結果:`, yamlData)

그리고 다음 내용만 수행!
위에서 정의한 index입니다.js 실행

$> node -r ./yaml-setup.js ./index.js

出力結果: { Hello: [ 'World' ] }

파일을 성공적으로 읽었습니다.yaml.🎉

index.js 옵션을 사용하지 않을 때

또 다음과 같은 내용도 쓸 수 있다.
./index.js

require("./yaml-setup") // `.yaml`ファイルを読み込めるようにする

const yamlData = require("./target.yaml") // 上記で定義したファイル

console.log(`出力結果:`, yamlData)

$> node ./index.js

出力結果: { Hello: [ 'World' ] }

참조 링크

https://qiita.com/erukiti/items/33fdf0170bbbb85c0f6c
https://nodejs.org/api/modules.html#modules_require_extensions
https://www.programmersought.com/article/50905381715/

후기

여기까지 읽어주셔서 감사합니다.🙏
"웹 패키지의 설정 파일은 분명히 Type Script로 쓸 수 있는데 왜 Node.js로 실행할 수 있습니까?"🤔 」이런 의문부터 조사를 시작했지만 상상과는 다른 형식으로 이루어져 조금 놀랐다.
모델해크의 일, 무심결에 사용.yaml옵션의 뜻을 이해할 수 있는 점, 다양한 프로그램 라이브러리를 이해할 수 있는 점 등은 작은 의식에서 다양한 것을 배울 수 있는 좋은 기회다.
여러분도 작은 주의점이 있다면 조사해 보면 의외로 재미있는 일이 발견될 수도 있죠?
기사가 잘못됐다면 리뷰 등을 통해 말해줬으면 좋았을 텐데.
이게 다른 사람의 참고가 되었으면 좋겠어요.
그럼 이따 봐요.👋
각주
자세한 내용은 interpret의 소스 코드↩︎를 참조하십시오.