storybook-addon-swc

Storybook 擴充套件，透過使用 swc 建置來縮短建置時間。

🗒 範例

• webpack4
• webpack5

🚀 安裝

$ npm install -D storybook-addon-swc @swc/core

👏 開始使用

編輯 .storybook/main.js 檔案並註冊擴充套件。

module.exports = {
  addons: [
    'storybook-addon-swc',
  ],
};

🔧 設定

可以根據需要傳遞其他設定選項。

module.exports = {
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        enable: true,
        enableSwcLoader: true,
        enableSwcMinify: true,
        swcLoaderOptions: {},
        swcMinifyOptions: {},
      },
    },
  ],
};

選項

名稱	描述	類型	預設值
enable	如果設為 false，則會停用此擴充套件。	布林值	true
enableSwcLoader	如果設為 false，則會停用 swc-loader 並使用 babel-loader。	布林值	true
enableSwcMinify	如果設為 false，則會停用使用 swc 的最小化，並使用傳統的 terser 進行最小化。	布林值	true
swcLoaderOptions	swc loader 的選項。	物件	請參閱
swcMinifyOptions	swc 最小化的選項。	物件	請參閱

SWC 外掛程式

SWC 外掛程式功能仍在實驗階段，但可以透過變更設定來使用，如下所示。

module.exports = {
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        swcLoaderOptions: {
          jsc: {
            experimental: {
              plugins: [['plugin-name', {}]],
            },
          },
        },
      },
    },
  ],
};

🎓 替代方案

storybook-addon-turbo-build

此擴充套件會使用 esbuild-loader 取代 babel-loader。
它在開發 storybook-addon-swc 時被用作參考。

storybook-builder-vite

此建置器會將 Storybook 的建置系統從 Webpack 變更為 Vite。
Vite 非常快速，因為它在開發期間不會進行捆綁。

🤝 貢獻

歡迎提出貢獻、問題和功能請求。

如果您想貢獻，請隨時查看問題頁面。

📝 授權條款

版權所有 © 2020 @Karibash。

此專案使用 MIT 授權條款。