环境
- webpack@5.74.0
- @swc/core@1.3.11
- @babel/core@7.19.1.
- vue@2.7.10
使用swc编译ts,tsx代码
根据swc官网文档,@swc/core – SWC我们可以用swc-loader 替换 ts-loader。
swc 配置为
.swcrc
{
//... 省略
"jsc": {
"syntax": "typescript",
"tsx": true,
"decorators": false,
"dynamicImport": false
},
"transform":{
"react": {
"pragama": "h",// 方法名称 官网例子为React.createElement。这里vue 用h
"throwIfNamespace": true,
"development": false,
"useBuiltins": false
}
}
}
2022.11.25更新
配置会成功将你的 tsx代码转换成 <div> =转换=>h(‘div’)
但是:会将作用域中同名变量更名,例如在vue2中:export default { render:(h) => <div></div> } // 转换后 export default { render:(h1) => h('div'); // 方法形参编译后被改成h1 了!!! }
这样就导致控制台报错h方法找不到
挣扎:
解决方案1
window上挂载h = vue导出的h
js // main.js import {h} from 'vue'; window.h = h;
解决方案2
使用webpack.DefinePlugin 先更改swc配置,将方法名写特殊一点 如
transform.react.pragama: 'Vue_createElement'
然后在webpack 配置中添加:new DefinePlugin({ 'Vue_createElement': 'h' // 将代码中"Vue_createElement" 的字符串替换为 "h" })
仍存在问题:
tsx中,不能按react 的方式转换代码,vue props 无法传递。
暂时解决
- 直接使用
h()
函数构建代码。这里要注意props 与v-on 的传递方式- tsx 使用babel 配合transform-vue-jsx 插件转换。
2023.4.20更新
对于vue3
swc-plugin-vue-jsx 可以转换jsx代码
Vue2
暂未找到
2023.8.3更新
swc-plugin-another-transform-imports 可以替代babel-plugin-import
使用Babel 处理按需引入
由于swc 现在没有类似babel-plugin-import 之类的插件。因此,我们仍要使用babel-plugin-import 类按需引入ant-design-vue这类的库
因此,我将按需引入的代码都写到一个ts文件中,然后在webpack.config.js中配置如下:
webpack.config.js
// ... 省略
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},{
test: /vueComponents\.ts$/,
include: /src/, // 这个文件就放在/src/vueComponents.ts
loader: 'babel-loader',
},{
test: /\.(j|t)sx?$/,
loader: 'swc-loader',
}
]
}
// ... 省略
项目需要按需引入的组件库都写在这个文件中。
vueComponents.ts
import {Button,...} from 'ant-design-vue';
Vue.use(Button);
...
babel.config.js
这个应该比较熟悉了,使用 babel-plugin-import 按需引入。
若支持按需引入,官网一般都会提供例子,这里就不列了。
这样,有按需引入代码的文件走babel-loader,其他文件都走swc-loader
结尾
处理到这,影响构建速度的剩下 vue-loader 与 代码压缩 。
- 提升vue-loader的速度没有什么明显的方法,一般配合thread-loader 执行。
- 代码压缩可使用esbuild,因为它还能压缩css。我之前有试过 Webpack + swc + esbuild 优化构建速度尝试。
最终项目架构
- webpack5
- typescript
- vue3
- swc
- swc-plugin-vue-jsx
- swc-plugin-another-transform-imports
- esbuild 做css压缩
- less
- terser-webpack-plugin 用swc做压缩