TypeScript基础篇 - Vue-TS-Rollup 环境实战

// 引入rollup的相关插件
import vue from 'rollup-plugin-vue';
import typescript from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';
 
// 定义环境变量
const isProduction = process.env.NODE_ENV === 'production';
 
// 配置Rollup的输出格式
const globals = {
  'vue': 'Vue',
  'vue-ts-rollup-example': 'VueTsRollupExample'
};
 
// 定义Rollup的配置
export default {
  input: 'src/index.ts', // 入口文件
  output: [
    {
      file: 'dist/vue-ts-rollup-example.umd.js', // 打包后的UMD格式文件
      format: 'umd', // 打包格式
      name: 'VueTsRollupExample', // 全局变量名
      globals, // 外部依赖的全局变量
      sourcemap: true // 是否生成source map
    },
    ...(isProduction ? [
      {
        file: 'dist/vue-ts-rollup-example.umd.min.js', // 压缩后的UMD格式文件
        format: 'umd', // 打包格式
        name: 'VueTsRollupExample', // 全局变量名
        globals, // 外部依赖的全局变量
        plugins: [terser()], // 使用terser插件进行代码压缩
        sourcemap: true // 是否生成source map
      }
    ] : [])
  ],
  plugins: [
    vue({
      css: true, // 将样式文件从vue文件中提取出来
      compileTemplate: true // 编译vue模板
    }),
    typescript({
      tsconfig: 'tsconfig.json', // 指定tsconfig.json文件
      include: [ // 包含的文件
        'src/**/*.ts',
        'src/**/*.tsx',
        'src/**/*.vue'
      ],
      exclude: [ // 排除的文件
        'node_modules',
        '**/__tests__'
      ]
    }),
    postcss({
      extract: true, // 提取css到单独文件
      minimize: true // 是否开启css压缩
    }),
    ...(isProduction ? [terser()] : []) // 根据是否为生产环境决定是否添加terser插件
  ],
  external: [ // 指定外部不打包的依赖
    'vue',
    'vue-ts-rollup-example'
  ]
};

这个配置文件定义了如何将一个Vue和TypeScript项目打包成UMD格式的库，并可选择性地生成压缩版本。它包括了对TypeScript文件的处理、Vue组件的编译和样式文件的处理。同时，它还包括了对生产环境代码的压缩。这个实例为开发者提供了一个如何配置和优化Vue和TypeScript项目的参考。