基于rollup + typescript开发vue组件，可使用ts装饰器

Posted 2021-09-16 Raman_Liu

支持多入口操作，支持 typescirpt 装饰器模式，config 里面 output.format 使用 umd 模式不支持代码分割，单一文件入口建议 umd 模式
需要官方文档移步 rollup文档

rollup.config.js

import path from \'path\'
import resolve from \'rollup-plugin-node-resolve\'
import babel from \'rollup-plugin-babel\'
import commonjs from \'rollup-plugin-commonjs\'
import { uglify } from \'rollup-plugin-uglify\'
import vuePlugin from \'rollup-plugin-vue\'
import less from \'rollup-plugin-less\'
import typescript from \'rollup-plugin-typescript2\'
const resolveFile = name => path.resolve(__dirname, name)
const extensions = [\'.js\', \'.ts\', \'.tsx\', \'.vue\']

// ts
const tsPlugin = typescript({
  tsconfig: resolveFile(\'./tsconfig.json\'), // 本地ts配置
  extensions
})

export default {
  input: [
    \'src/vue-tree-in-select/index.js\'
  ],
  output: {
    dir: \'dist/vue-tree-in-select/\',
    name: \'vue-tree-in-select\',
    exports: \'named\',
    format: \'umd\' // cjs amd 可用
  },
  plugins: [
    tsPlugin,
    resolve(extensions),
    commonjs(),
    uglify(), // 压缩代码
    vuePlugin({
      exposeFilename: false,
      target: \'browser\'
    }),
    less({
      output: \'dist/vue-tree-in-select/index.css\'
    }), // less编译
    babel({
      exclude: \'node_modules/**\', // 只编译源代码
      extensions,
      runtimeHelpers: true,
      presets: [
        "@babel/preset-env",
        "@babel/preset-typescript",
      ],
      plugins: [
        [\'@babel/plugin-proposal-class-properties\', { loose: true }],
        [\'@babel/plugin-proposal-decorators\', { legacy: true }],
        ["@babel/plugin-transform-runtime"]
      ]
    })
  ]
}

package.json

{
  //...,
  "scripts": {
    "dev": "rollup -c ./rollup.config.js -w",
    "build": "rollup -c ./rollup.config.js"
  },
  "dependencies": {
    "tslib": "^1.10.0",
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-decorators": "^7.12.12",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.12.10",
    "@babel/preset-typescript": "^7.12.7",
    "@rollup/plugin-node-resolve": "^11.0.1",
    "@umijs/fabric": "^2.5.7",
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/compiler-sfc": "^3.0.7",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-import": "^1.12.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "rollup": "^2.35.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-less": "^1.1.3",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-typescript2": "^0.29.0",
    "rollup-plugin-uglify": "^6.0.4",
    "rollup-plugin-vue": "^5.0.0",
    "typescript": "^3.4.5",
    "vue-template-compiler": "^2.6.12"
  },
  //...
}

入口test.ts

import { Greeter } from \'./modules\';
var cube = new Greeter(\'cube\')
var doIt = cube.greet()

modules.ts

function DemoClassDecorator(target: Function) {
  target.prototype.xname = \'decorator\'
  Object.seal(target);
}

@DemoClassDecorator
export class Greeter {
  greeting: string;
  xname!: string;
  constructor(message: string) {
    this.greeting = message;
  }

  greet(): string {
    return \'Hello, \' + this.greeting;
  }
}

入口vue-demo

<template>
  <div class="demo_page">
    <Child />
    <ul class="item_list">
      <li class="item" @click="onItemClick">name</li>
    </ul>
  </div>
</template>

<script>
import Child from \'./child.vue\'
import { ref } from \'vue\'
export default {
  inheritAttrs: false,
  components: { Child },
  setup(_props, { emit }) {
    const kidRef = ref()
    const onItemClick = () => {
      emit(\'onClick\', { action: \'clicked\' })
    }
    return {
      kidRef,
      onItemClick
    }
  }
}
</script>

<style lang="less">
.item_list {
  list-style: none;
  font-size: 14px;
  color: #333;
  .item:nth-child(2n-1) {
    background: #f9f9f9;
  }
}
</style>

命令

npm run build，可以看到dist中打包出三个文件 index.js，test.js，vue-demo.css
npm run dev，监听源文件修改并打包
另外推荐 el-admin-table，基于 Vue2.x + ElementUI 封装的 table/pagination/form 多合一组件