How can I transpile and build my typescript vue app with only babel? I used the vue-cli-service extensively but reached a point where I just need a minimal setup, without webpack or anything.

My .babelrc

{
    "presets": ["babel-preset-typescript-vue"],
    "plugins": ["@babel/plugin-transform-typescript"]
}

My package.json dependencies:

"devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/plugin-transform-typescript": "^7.11.0",
    "@babel/preset-env": "^7.11.0",
    "babel-loader": "^8.1.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-typescript-vue": "^1.1.1",
    "typescript": "~3.9.3",
    "vue-template-piler": "^2.6.11"
},
"dependencies": {
    "vue": "^2.6.12",
    "vue-class-ponent": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vuex": "^3.5.1"
}

My entry main.ts file:

import Vue from 'vue'
import Vuex from 'vuex';
import App from './App.vue'

Vue.config.productionTip = false;
Vue.use(Vuex);
    
new Vue({render: h => h(App)}).$mount('#app');

My App.vue

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';

    @Component
    class App extends Vue {}

    export default App;
</script>
    
<template>
    <div class="foobar">Babel worked</div>
</template>

My build script:

babel src/main.ts --out-dir build

How can I transpile and build my typescript vue app with only babel? I used the vue-cli-service extensively but reached a point where I just need a minimal setup, without webpack or anything.

My .babelrc

{
    "presets": ["babel-preset-typescript-vue"],
    "plugins": ["@babel/plugin-transform-typescript"]
}

My package.json dependencies:

"devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/plugin-transform-typescript": "^7.11.0",
    "@babel/preset-env": "^7.11.0",
    "babel-loader": "^8.1.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-typescript-vue": "^1.1.1",
    "typescript": "~3.9.3",
    "vue-template-piler": "^2.6.11"
},
"dependencies": {
    "vue": "^2.6.12",
    "vue-class-ponent": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vuex": "^3.5.1"
}

My entry main.ts file:

import Vue from 'vue'
import Vuex from 'vuex';
import App from './App.vue'

Vue.config.productionTip = false;
Vue.use(Vuex);
    
new Vue({render: h => h(App)}).$mount('#app');

My App.vue

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';

    @Component
    class App extends Vue {}

    export default App;
</script>
    
<template>
    <div class="foobar">Babel worked</div>
</template>

My build script:

babel src/main.ts --out-dir build

• javascript
• typescript
• vue.js
• vue-ponent
• babeljs

• Do you use the vue-cli3 to create your project? – Terence Cheng Commented Aug 27, 2020 at 15:45
• @Tingsen Cheng yes in a matter of fact I do. – Asperger Commented Aug 30, 2020 at 12:10
• similar question: stackoverflow./questions/59103389/… – yaya Commented Sep 3, 2020 at 8:53

1 Answer 1

Unfortunately you cannot build with babel, as it only transpiles languages and it cannot build modules. You will still need some type of bundler to resolve require / import imports. If you don't want giant hefty webpack configs you can look at Rollup or Parcel

If you want to actually just pile you typescript and vue typescript you need to install @babel/preset-typescript @babel/preset-env, include them in .babelrc file.

Then use babel ./src/main.ts --out-dir build --extensions ".ts" or better yet use locally installed babel ./node_modules/.bin/babel ./src/main.ts --out-dir build --extensions ".ts"