先上github，无心观看可直接食用

配置好的rollup+ts+vue

---

配置及说明

创建项目

mkdir rollup-vue-ts
cd rollup-vue-ts
npm init -y
tsc -init

tsc -init命令：初始化并创建tsconfig.json文件

---

安装依赖

第一步rollup相关

npm i rollup rollup-plugin-buble rollup-plugin-commonjs rollup-plugin-json rollup-plugin-node-resolve rollup-plugin-terser rollup-plugin-filesize -D

上述命令行安装包解释：

rollup: rollup核心包

rollup-plugin-buble: 类似babel的工具，比babel轻

rollup-plugin-commonjs: 将commonJS 转换成 es6 模块

rollup-plugin-json: 将 json 文件转换为 es6 模块

rollup-plugin-node-resolve: 帮助 rollup 查找外部模块

rollup-plugin-terser: 压缩

rollup-plugin-filesize: 显示打包出来的文件大小

---

第二步typescript相关

npm i typescript rollup-plugin-typescript2 -D

上述命令行安装包解释：

typescript: typescript核心包

rollup-plugin-typescript2: 让rollup识别typescript

---

第三步vue相关

npm i vue vue-template-compiler rollup-plugin-vue@5.1.9 vue-class-component vue-property-decorator rollup-plugin-replace -D

上述命令行安装包解释：

vue: vue核心包

vue-template-compiler: 将vue编写为渲染函数

rollup-plugin-vue: 让rollup识别vue文件，5.1.9为最后支持vue2.x的版本，高于该版本的为支持vue3.0的

vue-class-component：官方出品，以class方式写vue组件

vue-property-decorator： 社区出品，深入依赖vue-class-component，扩展和封装了部分修饰器

rollup-plugin-replace: 帮助rollup识别一些特有的参数，如process.env.NODE_ENV

---

配置rollup

和webpack类似，但是比webpack简单很多，需要至少一个入口，一个出口，详细配置教程请参考rollup官网

此处贴一份上述npm包的rollup.config.js

import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import json from 'rollup-plugin-json'
import { terser } from 'rollup-plugin-terser'
import nodeResolve from 'rollup-plugin-node-resolve'
import vue from 'rollup-plugin-vue'
import filesize from 'rollup-plugin-filesize'
import buble from 'rollup-plugin-buble'
import replace from 'rollup-plugin-replace'

// 入口
const input = 'src/index.ts'
// 插件
const plugins = [ // 顺序无严格要求，目前观察buble需要放在vue下面
  json(),
  nodeResolve(),
  commonjs(),
  replace({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  vue(),
  typescript({
    objectHashIgnoreUnknownHack: true
  }),
  buble(),
  terser(),
  filesize()
]

// 外链 - 外部依赖的名称，放在该处的npm包不会参与打包
const external = ['vue']

export default [
  {
    input,
    // 出口
    output: {
      file: 'dist/index.umd.js',
      format: 'umd', // umd格式为amd, cjs, iife的结合
      name: 'rollup-vue-ts', // 此处修改为希望包挂在window上的名称
      sourcemap: false
    },
    plugins,
    external
  },
  {
    input,
    // 出口
    output: {
      file: 'dist/index.esm.js',
      format: 'es', // es格式，推荐同时输出一份es格式的, 提供给模块化打包工具
      sourcemap: false
    },
    plugins,
    external
  }
]

---

配置tsconfig.json

详细的tsconfig.json参数及其含义请参考typescript官网

此处贴一份自己的

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "declaration": true,
    "outDir": "./dist/",
    "strict": true,
    "sourceMap": false,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "experimentalDecorators":true,
    "lib": ["es6", "dom"]
  },
  "exclude": ["dist"]
}

配置typing.d.ts

前面几步的步骤后，基本OK了，但是默认ts是不认识vue后缀的，因此我们需要在项目根目录增加一个typing.d.ts用于项目识别vue后缀文件

declare module '*.vue' {
  import Vue from 'vue'

  export default Vue
}

---

配置package.json

增加打包与上传命令

  "main": "index.umd.js",
  "module": "index.esm.js",
  "scripts": {
    "build": "rm -rf dist && rollup -c", // 打包
    "upload": "yarn build && npm publish" // 上传到npm
  },

增加vue组件和编写index.ts

Vue使用ts如何写请自学，此处说一个index.ts和js的区别

import Demo from './Demo/index.vue'

const components = [
  Demo,
]

const install = (Vue: any) => {
  if ((install as any).installed) return
  ;(install as any).installed = true
  components.forEach((component: any) => {
  	// 在ts的版本中需要使用component.extendOptions.name，具体原因可以自己log看一下
    Vue.component(component.extendOptions.name, component)
  })
}

if (typeof window !== 'undefined' && (window as any).Vue) {
  install((window as any).Vue)
}

export default {
  install
}