@speedy-js/speedy-plugin-swc

@speedy-js/speedy-plugin-swc

插件性质

• 类似babel-plugin 利用 swc 替换babel 来实现 babel 类似功能的插件集合体

插件可选配置

• speedy-react-runtime 作用：自动填补 tsx 上 "import React from 'react'"
• speedy-react-babelimport 作用：代替babel-import-plugin

speedy-react-runtime 配置示例

• exlude(选填): 正则数组 匹配则跳过 speedy-react-runtime 的处理

import { defineConfig } from '@speedy-js/speedy-core';
import { SwcPlugin } from '@speedy-js/speedy-plugin-swc';

export = defineConfig({
  input: {
    main: './src/index.tsx',
  },
  plugins: [
    SwcPlugin([
      {
        name: "speedy-react-runtime",
        exclude: [/node_modules/],
      },
    ]),
  ]
});

speedy-react-babelimport 配置示例

• exlude(选填): 正则数组 匹配则跳过 speedy-react-babelimport 的处理
• config[x].fromSource(必填): 替换 packagename 例如 "antd","@arco-design/web-react"
• config[x].replaceCss(选填): Object
• config[x].replaceCss.replaceExpr(必填): string 替换表达式 -> antd/lib/{}/style/css => import "antd/lib/button/style/css"
• config[x].replaceCss.lower(选填): bool 是否替换时进行小写转化
• config[x].replaceCss.ignoreStyleComponent(选填): string[] 填写忽略的组件名称
• config[x].replaceJs(选填): Object
• config[x].replaceJs.replaceExpr(必填): string 替换表达式 -> antd/es/{}/index.js => import button from "antd/es/button/index.js"
• config[x].replaceJs.lower(选填): bool 是否替换时进行小写转化
• config[x].replaceJs.ignoreEsComponent(选填): string[] 填写忽略的组件名称

import { defineConfig } from '@speedy-js/speedy-core';
import { SwcPlugin } from '@speedy-js/speedy-plugin-swc';

export = defineConfig({
  input: {
    main: './src/index.tsx',
  },
  plugins: [
    SwcPlugin([
      {
        name: 'speedy-react-babelimport',
        exclude: [/node_modules/],
        config: [
          {
            fromSource: 'antd',
            replaceCss: {
              ignoreStyleComponent: ['button'],
              replaceExpr: `antd/lib/{}/style/css`,
              lower: true,
            },
            replaceJs: {
              ignoreEsComponent: ['button'],
              lower: true,
              replaceExpr: `antd/es/{}/index.js`,
            },
          },
        ],
      },
    ]),
  ],
});

综合使用示例

import { defineConfig } from '@speedy-js/speedy-core';
import { SwcPlugin } from '@speedy-js/speedy-plugin-swc';

export = defineConfig({
  input: {
    main: './src/index.tsx',
  },
  plugins: [
    SwcPlugin([
      {
        name: "speedy-react-runtime",
        exclude: [/node_modules/],
      },
      {
        name: 'speedy-react-babelimport',
        exclude: [/node_modules/],
        config: [
          {
            fromSource: 'antd',
            replaceCss: {
              ignoreStyleComponent: ['button'],
              replaceExpr: `antd/lib/{}/style/css`,
              lower: true,
            },
            replaceJs: {
              ignoreEsComponent: ['button'],
              lower: true,
              replaceExpr: `antd/es/{}/index.js`,
            },
          },
        ],
      },
    ]),
  ],
});