vuejs / rollup-plugin-vue

Roll .vue files
https://vuejs.github.io/rollup-plugin-vue
MIT License
843 stars 148 forks source link

Add setup example for lang="ts" #323

Closed mesqueeb closed 4 years ago

mesqueeb commented 4 years ago

What problem does this feature solve?

Currently it has a setup example for Vue files with JavaScript script tags.

I think it would be greatly beneficial for a lot of devs to add a setup example for dev who use Vue files with:

<script lang="ts">

for TypeScript (but without the class syntax)

What does the proposed API look like?

Setup example for TypeScript

import commonjs from 'rollup-plugin-commonjs' 
import VuePlugin from 'rollup-plugin-vue'
// ~~~~ typescript required plugins

export default {
  entry: 'main.js',
  plugins: [
    commonjs(),
    VuePlugin(/* VuePluginOptions */)
    // ~~~~ typescript required setup
  ]
}
mesqueeb commented 4 years ago

compiling a vue SFC with lang="ts" worked for me with this setup:

import VuePlugin from 'rollup-plugin-vue'
import typescript from 'rollup-plugin-typescript2'

export default {
  plugins: [
    typescript({
      typescript: require('typescript'),
      objectHashIgnoreUnknownHack: true,
    }),
    VuePlugin(/* VuePluginOptions */),
  ],
  input: 'src/components/HelloWorld.vue',
  output: [
    { file: 'dist/HelloWorld.cjs.js', format: 'cjs' },
    { file: 'dist/HelloWorld.esm.js', format: 'esm' },
  ],
}

without that objectHashIgnoreUnknownHack it doesn't.

I'm not sure if this is the best way to create a module out of a Vue SFC with lang="ts".

If anyone has any advice, please let me know.

znck commented 4 years ago

The requirement for objectHashIgnoreUnknownHack is fixed in #324.

znck commented 4 years ago

@mesqueeb Your usage example seems correct.