环境准备

沿用上一篇文章的逻辑，使用pnpm

pnpm init
npx tsc --init

uniapp环境

参考官方文档：

npm install -g @vue/cli

对于ci过程，采用：eslint + prettier + husky + commitlint + stylelint 这里直接给出配置文件：

eslint:

• 准备工作：

pnpm add   eslint eslint-plugin-prettier eslint-plugin-vue -D

• .eslintrc代码：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  // 配置js全局变量，因为是uni-app，全局的uni是不需要引入的，还有5+的plus对象
  globals: {
    uni: 'readonly',
    plus: 'readonly',
    wx: 'readonly',
    App: 'readonly',
    Page: 'readonly',
  },
  extends: ['plugin:vue/recommended', '@vue/prettier'],
  plugins: ['@typescript-eslint'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 8,
      },
    ],
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: ['index', 'Global'], //需要忽略的组件名
      },
    ],
    'vue/no-v-model-argument': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'never',
          normal: 'always',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  overrides: [
    {
      files: ['**/__tests__/*.spec.{j,t}s?(x)'],
      env: {
        jest: true,
      },
    },
  ],
}

prettier + husky + commitlint + stylelint参考

打包环境

由于组件库需要支持多端，所以打包保留原有的uniapp模板代码。 打包思路分为4步：

• 复制package.json文件，用于npm发包 发包模板：

{
  "name": "@quni/uni-component",
  "private": false,
  "license": "MIT",
  "description": "基于 Vue 3 的轻量、快速的多平台开发 UI 组件库",
  "main": "lib/index.js",
  "module": "lib/index.js",
  "typings": "lib/index.d.ts",
  "publishConfig": {
    "access": "public"
  },
  "repository": {
    "type": "git"
  },
  "keywords": [
    "vue",
    "vue3",
    "uniapp",
    "vue3 component"
  ],
  "files": [
    "lib"
  ],
  "peerDependencies": {
    "vue": "^3.2.45"
  },
  "version": "0.0.1"
}

• 构建样式

  思路：实现单一的scss文件生成css文件，使用glup和glup插件处理： 需要的npm包：gulp-autoprefixer gulp-sass sass

  • 查找组件文件下所有index.scss结尾的文件
  • 使用gulp将scss打包，并且将打包后的css文件输出到对应组件的路径：

        src(resolve(SRC_DIR, `components/${folderName}/index.scss`))
      .pipe(sass())
      .pipe(autoprefixer())
      .pipe(dest(resolve(LIB_DIR, `components/${folderName}`)))
     ```
  

• 构建组件

  思路：

  • 首先解析vue模板获取对应的script标签的ts文件
  • 判断ts文件是否是setup写法
    • 如果不是setup写法,将ts文件直接暂存 方便之后对ts文件单独打包
    • 如果是setup写法，将是setup写法的ts文件路径单独保存，方便以后识别
  • 通过vite.build将保存的ts文件打包为js文件，只做压缩和转换处理
  • 针对setup文件做单独处理：
    • props写法中的用-拼接的写法转换为小驼峰
    • 将props.值写法转换为props.value.值
    • js文件仍然用
  • 使用打包后的文件生成install全局注册函数 方便uniapp中动态使用

• 构建类型提示文件

  • 通过全局的tsconfig.declaration.json文件配置，生成d.ts文件：

     "dts": "rimraf dts && vue-tsc --declaration --emitDeclarationOnly -p ./tsconfig.declaration.json",
  
  

  • 通过路径将vue.d.ts文件放在对应的组件路径下

  • 对应全局install函数生成对应的定义文件

打包最终效果

项目github地址：

文档地址

• 目前还在开发初始阶段 后续会继续完善文档