@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`,
},
},
],
},
]),
],
});