javascript - Build typescript vue apps with only babel? - Stack Overflow

admin管理员组

文章数量:1345411

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

Share Improve this question Follow edited Aug 28, 2020 at 14:42 ColdHands 1,06899 silver badges3333 bronze badges asked Aug 25, 2020 at 11:16 AspergerAsperger 3,2221111 gold badges5959 silver badges106106 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 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"

本文标签： javascriptBuild typescript vue apps with only babelStack Overflow