npm i esbuild-import-loader
yarn add esbuild-import-loader
{
// 同时认识ts jsx js tsx 文件
test: /\.(t|j)sx?$/,
exclude: /node_modules/,
use: [
{
loader: 'esbuild-import-loader',
options: {
loader: 'tsx',
target: 'esnext',
},
},
],
},
支持所有可选项来自于esbuild , 不过最主要解决的问题还是使用 esbuild 去编译 tsx 或者 jsx, 同时支持按需加载 ,方便 tree-shaking
参数 |
---|
libraryName 仓库名 如 antd |
customName 自定义转换格式 |
customStyle 自定义 css 生成样式 |
{
// 同时认识ts jsx js tsx 文件
test: /\.(t|j)sx?$/,
exclude: /node_modules/,
use: [
{
loader: 'esbuild-import-loader',
options: {
loader: 'tsx',
target: 'esnext',
libraryName: 'antd',
customName: (name) => {
return `antd/lib/${name}`
},
customStyle: (name) => {
return `antd/lib/${name}/style/index.css`
},
},
},
],
},
会生成 如下:
import { Button } from 'antd';
// 👇🏻 👇🏻 👇🏻 👇🏻 👇🏻 👇🏻 👇🏻 👇🏻 👇🏻 👇🏻 //
import 'antd/lib/button/style/css';
import Button from 'antd/lib/button';