从零开始搭建一个组件库（二）

提示：前端查漏补缺，仅代表个人观点

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、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()],
  // ...
})
1
2
3
4
5
6

然后修改 package.json 中 build 指令，原指令 vue-tsc --noEmit 可以删除，vue-tsc 也是针对 SFC 组件的语法校验，既然使用 tsx 语法可以直接使用 tsc。

{
  "build": "vite build && tsc"
}
1
2
3

上面指令会有 js 文件和声明文件生成，我们只需要生成声明文件，还需要在 tsconfig.json 配置。

{
  "compilerOptions": {
    "declaration": true,
    "emitDeclarationOnly": true,
    "declarationDir": "./dist",
    // ...
  }
}
1
2
3
4
5
6
7
8

---

二、jsx 转换

tsx 语法的转换可以使用 babel，对于 ts 的转换需要用的 babel 预设 @babel/preset-typescript，以及 jsx 模板转换成 Vue 的 createVNode 函数需要用到 babel 插件 @vue/babel-plugin-jsx，上面提到 vite 转换 tsx 语法插件内部使用的就是该插件。下面创建 babel 配置：

{
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@vue/babel-plugin-jsx"
  ]
}
1
2
3
4
5
6
7
8

完成之后，使用 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
1
2
3
4
5
6
7

---

三、scss 预编译转换

• scss 语法同样要转成 css 语法，需要安装 gulp-sass、 sass，配置 gulpfile.js 文件。

代码如下（示例）：

function buildStyles(cb) {
  return src('src/**/*.scss')
    .pipe(sass()
    .on('error', sass.logError))
    .pipe(dest('dist/'))
}
1
2
3
4
5
6

• scss 语法变量转换之后会清空，所以如果希望外部还能使用到这些变量，需要把 scss 文件也拷贝一份到输出目录。

代码如下（示例）：

function copyScss(cb) {
  return src('src/**/*.scss').pipe(dest('dist/'))
}
1
2
3

• 由于 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()
    })
  )
// ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后，添加执行命令到 package.json 文件中。

{
  "build": "vite build && tsc && gulp"
}
1
2
3

---