新建了一个项目,使用react
webpack
搭建,开发使用纯ts(x)
。
在引入antd
之后,为了tree shaking
又配置了babel-plugin-import
,webpack
配置如下:
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
plugins: [
'@babel/plugin-transform-runtime',
['import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}],
]
}
}
}
出于个人习惯,没用babelrc
。
但这个配置的test
对ts(x)
是不匹配的,所以单独又写了一个配置:
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: ['ts-loader', {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
plugins: [
'@babel/plugin-transform-runtime',
['import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}],
]
}
}]
}
这个配置编译是能通过,但babel-plugin-import
的tree-shaking
失效了;之所以这么说,是因为当我把文件都改成js(x)
时,符合剪枝的预期。
猜测是ts-loader
配置有问题,但两个雷同配置本身就有点不爽,索性这次解决这个问题,思路是基于babel-loader
配置,增加对ts
的支持。
过程也不是特别复杂,直接上结果:
npm i -D @babel/preset-typescript
配置一个loader项目就可以了:
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-typescript'],
plugins: [
'@babel/plugin-transform-runtime',
['import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}],
]
}
}
}
以上。