【Figma Plugins】Figma PluginsにWebpackを導入する

はじめに

FigmaのPluginを開発する際、Figma PluginsにWebpackを導入したいと思ったことはありますか？
この記事では、Figma PluginsにWebpackを導入する方法を解説します。

Figma PluginsにWebpackを導入する

Webpackは複数のJavaScriptファイルをパッケージ化するモジュールバンドラです。
Webpackを導入するには、以下の手順で行います。

1. Webpackをインストールする
2. WebpackでTypescriptをセットアップする

1. Webpackをインストールする

1-1. npm をインストールする

まずは、ターミナルで以下のコマンドを入力します。

console.

npm install

1-2. webpackをインストールする

console.

npm install webpack webpack-cli --save-dev

2. WebpackでTypescriptをセットアップする

プラグインを正しくコンパイルするためには、Typescript を使用するように設定する必要があります。

2-1. Typescript コンパイラとローダをインストール

まずは、以下のコマンドを入力して、Typescript コンパイラとローダをインストールします。
インストールが完了すると、package.json に ts-loader が追加されます。

console.

npm install --save-dev typescript ts-loader

2-2. distフォルダを作成する

以下の画像のようにdistフォルダを作り、その中に code.js ファイルを移動させます。

2-3. srcフォルダを作成する

以下の画像のようにsrcフォルダを作り、その中に code.js ファイルを移動させます。

2-4. manifest.json を書き換える

以下のように manifest.json を書き換える

{
  "name": "sample",
  "id": "*******************",
  "api": "1.0.0",
- "main": "code.js",
+ "main": "dist/code.js",
  ...
}

2-5. package.json を書き換える

以下のように package.json を書き換える

"scripts": {
-   "build": "tsc -p tsconfig.json",
+   "build": "webpack",
    ...

2-6. tsconfig.json を書き換える

以下のように tsconfig.json を書き換える

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6"],
    "strict": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
-   ]
+   ],
+   "outDir": "./dist",
+   "jsx": "react",
+   "allowJs": true,
+   "moduleResolution": "node"
+ },
+ "include": ["src/**/*.ts"]
}

2-7. webpack.config.js を新規作成する

以下のような内容で、新しく webpack.config.js というファイルを作成する

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => ({
mode: argv.mode === 'production' ? 'production' : 'development',

// This is necessary because Figma's 'eval' works differently than normal eval
devtool: argv.mode === 'production' ? false : 'inline-source-map',
  entry: {
    code: './src/code.ts' // This is the entry point for our plugin code.
  },
  module: {
    rules: [
      // Converts TypeScript code to JavaScript
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  // Webpack tries these extensions for you if you omit the extension like "import './file'"
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
});

2-8. npm run build が通ったら、完了

npm run build  

上記のコマンドを実行すると、以下のようにエラーが出なかったら、完成です。

> sample@1.0.0 build
> webpack

asset code.js 6.81 KiB [compared for emit] (name: code)
runtime modules 670 bytes 3 modules
cacheable modules 323 bytes
  ./src/code.ts 259 bytes [built] [code generated]
webpack 5.92.1 compiled successfully in 1226 ms

まとめ

この記事では、Figma PluginsにWebpackを導入する方法を解説しました。
ぜひこの記事を参考にwebpackを導入してみてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。