JuniorTour / vue-template-babel-compiler

Enable Optional Chaining(?.), Nullish Coalescing(??) and many new ES syntax for Vue.js SFC based on Babel
https://www.npmjs.com/package/vue-template-babel-compiler
118 stars 9 forks source link

Vite support #46

Open jiridenteo opened 1 year ago

jiridenteo commented 1 year ago

Hi, how can I install this great package for Vite? Is it compatible? Thanks

JuniorTour commented 1 year ago

Yes, it works for vite!

1. With vitejs/vite-plugin-vue2 plugin (https://github.com/vitejs/vite-plugin-vue2)

Simply add options like below:

// vite.config.js
import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";

export default defineConfig({
  plugins: [
    createVuePlugin({
      jsx: true,
      vueTemplateOptions: {
        compiler: require('vue-template-babel-compiler'),
      },
    }),
  ],
}); 

2. underfin/vite-plugin-vue2 plugin (https://www.npmjs.com/package/vite-plugin-vue2)

This plugin contain vue-template-babel-compiler@1.2.0 out of box: https://github.com/underfin/vite-plugin-vue2/blob/master/package.json#L71

Just add vite-plugin-vue2 plugin, new syntax like optional chaining will work.

stephane303 commented 10 months ago

Is it possible to use this with vite-plugin-vue2 ? https://github.com/vitejs/vite-plugin-vue2

JuniorTour commented 10 months ago

@stephane303 sure, see reply above you, it contains detail usage.

stephane303 commented 10 months ago

Yes thanks, I got confused as yes it works with 2.7.14, but not (yet) with jest ... but I will get there ....