TypeScript + webpack で PEG.js を使う

この記事はQiitaから移転されました。

TypeScript + webpackのプロジェクトでPEG.jsを利用する方法の覚え書き。

概要

pegjs-loaderを使用することで手動でビルドする手間を省くことができます。これにより、たとえばparser.pegjsをそのままsrcに追加してimportできるようになります。

import parser from './parser';

const result = parser.parse('パースする文字列');

手順

• pegjs, pegjs-loaderをインストールする
• webpack.config.jsを編集する
• 型定義ファイルを作成する

pegjs, pegjs-loaderのインストール

npmでpegjsとpegjs-loaderをdevDependenciesとして追加します。

npm install --save-dev pegjs pegjs-loader

または

yarn add --dev pegjs pegjs-loader

webpack.config.jsの編集

pegjs-loaderのREADMEに倣ってwebpack.config.jsを編集しmoduleにpegjs-loaderを追加します。また.pegjsファイルを解決できるようresolveに'.pegjs'を追加するなどします。

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.pegjs$/,
        use: 'pegjs-loader',
      },
    ],
  },
  ...
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.pegjs'],
    modules: ['node_modules'],
  },
  ...
};

型定義ファイルの作成

「typescriptから自作のJSコードをimportしたい(PEG.jsで作ったParserとか) - Qiita」に倣って型定義ファイルを作成し適当なディレクトリに置きました。記事に感謝:bow:

interface ParserOptions {
  startRule?: string;
  tracer: any;
}

export interface Location {
  start: {
    offset: number;
    line: number;
    column: number;
  };
  end: {
    offset: number;
    line: number;
    column: number;
  };
}

export declare class SyntaxError extends Error {
  message: string;
  expected: string | null;
  found: string | null;
  location: Location;
  name: 'SyntaxError';
}

export declare function parse(input: string, options?: ParserOptions): any;

parse関数の戻り値の型には、使用する.pegjsファイルの実装に合わせたものを記述します。

まとめ

TypeScript + webpackのプロジェクトで.pegjsに記述されたパーサーを手軽に利用できるようになりました。