経験知ロゴ

@wordpress/scriptsをTypesccript対応にしてWordPresプラグインを開発する方法

@wordpress/scripts

WordPressプラグインの管理画面をWordPressに同梱されているReactを使って開発しようとしてます。

ビルド環境などは、@wordpress/scriptsにまとまっており、意外と簡単に環境は整います。

具体的な手順は下記記事を参考に進めて構築できました。

ですが、Typescriptに対応していないので、対応させました。

その手順をメモします。

ts-loaderを導入

Typescriptのコンパイルにts-loaderを使うのでインストール。

npm install ts-loader --save-dev

webpack.config.jsを拡張

@wordpress/scripts/config/webpack.configを拡張。

  • @wordpress/scriptsのデフォルトの設定では、src/index.jsがエントリポイントになっているので変更。
  • tsxファイルはts-loaderを使うように。
  • outputファイル名もmain.indexになってしまうのでindex.jsに変更。この辺はお好みで。
const path = require( 'path' );
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
    ...defaultConfig,
    entry: './src/index.tsx',
    module: {
        ...defaultConfig.module,
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            ...defaultConfig.module.rules,
        ],
    },

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

    output: {
        ...defaultConfig.output,
        filename: 'index.js',
        path: path.resolve( __dirname, 'build' ),
    },
};

@wordpress/scripts/config/webpack.configはバージョンが上がることで設定が変更になる場合があるので注意。

@wordpress/scripts/config/webpack.configの拡張については下記記事で書かれている。

Reactを使う

JSXを使っているファイルでは、Ractの読み込みを下記のようにする必要がある。

import * as React from ‘react’;

参考

Typescript化に関しては下記記事を参考にしました。

詳細なコードは下記リポジトリで確認できます。

週3日の副業で月50万

月50万稼げたら年収は600万で、普通の人以上の生活ができます。

それが週3日で稼げたら、残りの4日をどう過ごしますか?

  • 自分の趣味に全力を注ぐ
  • 家族との時間を増やし、子供の成長をしっかりと見守る
  • 毎週海外へ旅行へ行く
  • 新しいことに挑戦する
  • 何もせず、のんびり自由な時間を過ごす

週の半分以上が自分の好きなことに使えるのなら、人生は楽しい物になりますよね!

週2日の休みが増えるということは、

52週(1年) × 2日 = 104日

年間104日も増え、365日のうち208日も自分の時間に使えるのです!

更に、今30歳だとして、65歳まで働いたら、

104日 × 35年 = 3,640日

3,640日も変わってきます!!10年以上ですよ!10年!!

週2日の休みのために5日を無駄にする生活をいつまで続けますか?

週4日の自由たった3日で稼いで、自分のために自由に時間を使う生活をはじめましょう!

週3日で50万円稼げる案件は、業界最大級の案件を保有しているレバテックフリーランスで見つけられます。

1分で完了する無料登録で、時間の自由への一歩を踏み出しましょう!

おわりに

@wordpress/scriptsのページだと、.jsx, .ts, .tsxファイルやTypescriptに対応しているっぽいことを書いてありますが、@wordpress/scripts/config/webpack.configを見てみるとtsx、tsファイルの対応が書かれていないので対応していない?

役に立ったらこの記事のシェアをお願いします

ブログのフォロー・RSS購読は下記ボタンから