提示:前端查漏补缺,仅代表个人观点
文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、ts支持
tsc 转换 ts 文件能够生成 js 文件和声明文件,利用这个我们可以改造项目生成声明文件。
首先 Vue 组件语法使用 tsx 语法,SFC 组件语法不能支持 ts 声明输出,没办法 ts 只给 react 的 tsx 语法开了后门。需要转换 Vue 的 tsx 语法,需要添加插件 @vitejs/plugin-vue-jsx
,如果不需要使用 SFC 组件语法,可以移除默认配置的插件 @vitejs/plugin-vue。
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [vueJsx()],
// ...
})
然后修改 package.json
中 build 指令,原指令 vue-tsc --noEmit
可以删除,vue-tsc 也是针对 SFC 组件的语法校验,既然使用 tsx 语法可以直接使用 tsc
。
{
"build": "vite build && tsc"
}
上面指令会有 js 文件和声明文件生成,我们只需要生成声明文件,还需要在 tsconfig.json
配置。
{
"compilerOptions": {
"declaration": true,
"emitDeclarationOnly": true,
"declarationDir": "./dist",
// ...
}
}
二、jsx 转换
tsx 语法的转换可以使用 babel,对于 ts 的转换需要用的 babel 预设 @babel/preset-typescript
,以及 jsx 模板转换成 Vue 的 createVNode
函数需要用到 babel 插件 @vue/babel-plugin-jsx
,上面提到 vite 转换 tsx 语法插件内部使用的就是该插件。下面创建 babe
l 配置:
{
"presets": [
"@babel/preset-typescript"
],
"plugins": [
"@vue/babel-plugin-jsx"
]
}
完成之后,使用 gulp 需要用到 gulp-babel 插件
,创建 gulpfile.js
配置文件,添加处理 tsx 代码。
function buildTsx(cb) {
return src(['src/**/*.ts?(x)', '!src/**/*.d.ts'])
.pipe(babel())
.pipe(dest('dist/'))
}
exports.default = buildTsx
三、scss 预编译转换
- scss 语法同样要转成 css 语法,需要安装
gulp-sass
、sass
,配置gulpfile.js
文件。
代码如下(示例):
function buildStyles(cb) {
return src('src/**/*.scss')
.pipe(sass()
.on('error', sass.logError))
.pipe(dest('dist/'))
}
- scss 语法变量转换之后会清空,所以如果希望外部还能使用到这些变量,需要把 scss 文件也拷贝一份到输出目录。
代码如下(示例):
function copyScss(cb) {
return src('src/**/*.scss').pipe(dest('dist/'))
}
- 由于 scss 转换之后后缀名变成 .css,而组件中引入的是 .scss 后缀,所以还需要在处理 ts 文件时替换后缀名,可以在上面处理 ts 文件的代码添加。
src(['src/**/*.ts?(x)', '!src/**/*.d.ts'])
.pipe(
through.obj(function (file, encode, callback) {
if (file.isNull()) {
cb(null, file)
return
}
const code = file.contents.toString().replace(/import.+?\.scss(?:"|')/g, str => str.replace('.scss', '.css'))
file.contents = Buffer.from(code)
this.push(file)
callback()
})
)
// ...
最后,添加执行命令到 package.json 文件中。
{
"build": "vite build && tsc && gulp"
}