gulpでtsを触る

$ npm init -y

{
  "name": "gulp-react-static-generate",
  "version": "1.0.0",
  "description": "",
  "license": "MIT",
  "author": "hisho",
  "scripts": {
    "start": "echo \"Error: no test specified\" && exit 1"
  }
}

$ mkdir src && mkdir src/pages && touch src/pages/index.tsx

$ npm i -D gulp npm-run-all

$ mkdir gulpfile.js && touch gulpfile.js/index.js && touch gulpfile.js/reactRenderStaticMarkup.js

$ npm i -D @types/node

const gulp = require('gulp');

reactRenderStaticMarkup = (done) => {
  gulp
    .src('src/pages/**/*.tsx')
    .pipe(gulp.dest('dist'))
  done();
}

module.exports = reactRenderStaticMarkup;

const gulp = require('gulp');

const reactRenderStaticMarkup = require('./reactRenderStaticMarkup');

exports.renderReact = reactRenderStaticMarkup;
exports.watch = () => {
  gulp.watch('src/pages/**/*.tsx', reactRenderStaticMarkup);
}

{
  "name": "gulp-react-static-generate",
  "version": "1.0.0",
  "description": "",
  "license": "MIT",
  "author": "hisho",
  "scripts": {
    "start": "run-s gulp-render-react gulp-watch",
    "build": "run-p gulp-render-react",
    "gulp-render-react": "gulp renderReact",
    "gulp-watch": "gulp watch"
  },
  "devDependencies": {
    "@types/node": "^15.0.2",
    "gulp": "^4.0.2",
    "npm-run-all": "^4.1.5"
  }
}

$ npm ci

$ npm start

$ npm run build

$ npm i react react-dom

$ npx typesync

$ npm i

$ npm i -D gulp-typescript typescript

$ touch tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

const gulp = require('gulp');
const ts = require('gulp-typescript');
const path = require('path');

const tsProject = ts.createProject(path.resolve(process.cwd(),'tsconfig.json'));

reactRenderStaticMarkup = (done) => {
  gulp
    .src('src/pages/**/*.tsx')
    .pipe(tsProject())
    .pipe(gulp.dest('dist'))
  done();
}

module.exports = reactRenderStaticMarkup;

$ npm run gulp-render-react

import React from "react";

const IndexPage: React.VFC = () => {
  return (
    <div>
      ハロー
    </div>
  )
}

import React from "react";
const IndexPage = () => {
    return (<div>
      ハロー
    </div>);
};

$ npm i -D through2

$ npx typesync

$ npm i

const gulp = require('gulp');
const ts = require('gulp-typescript');
const path = require('path');
const through = require("through2");
const gutil = require('gulp-util');

const tsProject = ts.createProject(path.resolve(process.cwd(), 'tsconfig.json'));

reactRenderStaticMarkup = (done) => {
  gulp
    .src('src/pages/**/*.tsx')
    .pipe(tsProject())
    .pipe(through.obj((file, _, callback) => {
      //何かしらのプラグインがファイルの中身を stream にして次に渡して来た時
      if (file.isStream()) {
        callback(new gutil.PluginError('react render static', 'Streams not supported'));
        return callback(null, file);
      }

      //ファイルの中身がBufferとしてわたってきた場合
      if (file.isBuffer()) {
        try {
          //現在処理しているfileのpath
          const modulePath = path.resolve(process.cwd(), file.path);
          //現在処理しているfileのext(拡張子)
          const moduleExt = path.extname(modulePath);

          //拡張子を.htmlに変換する
          file.path = file.path.replace(new RegExp(`${moduleExt}$`), '.html');

          //変換後のfileを返す
          return callback(null, file);

          //エラーの処理
        } catch (e) {
          console.error("ERROR RENDERING TSX PAGE: ", e.stack);
          return callback(null, file);
        }
      }
    }))
    .pipe(gulp.dest('dist'))
  done();
}

module.exports = reactRenderStaticMarkup;

import React from "react";
import {Layout} from "../layouts/Layout";

export default function () {
  return (
    <Layout>
      <h1>タイトル</h1>
      ハロー
    </Layout>
  )
}

import React from "react";
import {Layout} from "../layouts/Layout";

export default function () {
  return (
    <div>
      レイアウト
      <h1>タイトル</h1>
      ハロー
    </div>
  )
}