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

※本ページはプロモーションが含まれています

公開日：2021/11/24 更新日：2021/11/24

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の読み込みを下記のようにする必要がある。

参考

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

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

おわりに

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