Build typescript vue apps with only babel?

Question

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-compiler": "^2.6.11"
},
"dependencies": {
    "vue": "^2.6.12",
    "vue-class-component": "^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

Do you use the vue-cli3 to create your project?

Terence Cheng
– Terence Cheng

2020-08-27 15:45:25 +00:00
Commented Aug 27, 2020 at 15:45 — Terence Cheng
– Terence Cheng, Commented Aug 27, 2020 at 15:45
@Tingsen Cheng yes in a matter of fact I do.

Asperger
– Asperger

2020-08-30 12:10:35 +00:00
Commented Aug 30, 2020 at 12:10 — Asperger
– Asperger, Commented Aug 30, 2020 at 12:10
similar question: stackoverflow.com/questions/59103389/…

yaya
– yaya

2020-09-03 08:53:53 +00:00
Commented Sep 3, 2020 at 8:53 — yaya
– yaya, Commented Sep 3, 2020 at 8:53

ColdHands · Accepted Answer · 2020-08-28 13:07:36Z

12

+150

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 compile 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"

answered Aug 28, 2020 at 13:07

ColdHands

1,07810 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Build typescript vue apps with only babel?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related