rollup + typescript / vue3组件 配置

支持多入口操作，支持 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 { 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-demo/index.vue',
    'src/ts-demo/test.ts'
  ],
  output: {
    dir: 'dist/',
    format: 'es' // cjs amd 可用
  },
  plugins: [
    tsPlugin,
    resolve(extensions),
    uglify(), // 压缩代码
    vuePlugin({
      compileTemplate: true
    }),
    less({
      output: 'dist/vue-demo.css'
    }), // less编译
    babel({
      exclude: 'node_modules/**', // 只编译源代码
      extensions,
      presets: [
        "@babel/preset-env",
        "@babel/preset-typescript",
      ],
      plugins: [
        [
          "@babel/plugin-proposal-decorators",
          {
            legacy: true
          }
        ]
      ]
    })
  ]
}

package.json

{
  //...,
  "scripts": {
    "dev": "rollup -c ./rollup.config.js -w",
    "build": "rollup -c ./rollup.config.js"
  },
  "dependencies": {
    "tslib": "^1.10.0",
    "vue": "^3.0.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-decorators": "^7.12.12",
    "@babel/plugin-transform-runtime": "^7.12.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/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": "^6.0.0",
    "typescript": "^3.4.5"
  },
  //...
}

入口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

命令

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