如何在 Sketch 插件中使用 React Typescript

[rottenpen]

一开始打算参考how-to-use-react-in-your-sketch-plugin的方案配，但是也许是 skpm 的版本不一致，遇到了多路径入口只读 default 的问题，在配置 TS 的时候遇到了不少问题。
最后放弃了一起构筑的方案，React webview 单独抽离打包，最后通过 shell 脚本打包。

[rottenpen]

// webpack.skpm.config.js
module.exports = function(config, isPluginCommand) {
  /** you can change config here **/
  if (!isPluginCommand) return;
  let debug = !!process.env.DEBUG;
  if (!debug)
    clearMapFilesForProduction("sketch-meaxure.sketchplugin/Contents");
  config.mode = debug ? "development" : "production";
  config.entry = {
    mark: "./src/index.ts",
  };
  config.module = {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: [/node_modules/, /sketch-hub-web/],
      },
    ],
  };
  config.resolve = {
    extensions: [".tsx", ".ts", ".js"],
  };
};

function clearMapFilesForProduction(dir) {
  fs.readdirSync(dir).forEach((file) => {
    let fullName = path.resolve(dir, file);
    if (fs.statSync(fullName).isDirectory()) {
      clearMapFilesForProduction(fullName);
      return;
    }
    if (file.endsWith(".js.map")) {
      console.log("remove js map file", file);
      fs.unlinkSync(fullName);
    }
  });
}

React webview 就比较简单，通过 CRA 生成项目，并配置 BUILD_PATH 就可以。

ps. 在执行 sketch plugin 的时候发现，插件内部资源必须使用相对路径加载，所以 PUBLIC_URL 也要设置

// .env
BUILD_PATH=../resources/web
PUBLIC_URL=./