Typoskript-Vue-Apps nur mit Babel erstellen?

Question

Wie kann ich meine Typoskript-Vue-App nur mit Babel transpilieren und erstellen? Ich habe den vue-cli-Service ausgiebig genutzt, aber einen Punkt erreicht, an dem ich nur noch ein minimales Setup benötige, ohne Webpack oder irgendetwas.

Mein .babelrc

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

Meine package.json-Abhängigkeiten:

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

Mein Eintrag main.ts Datei:

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');

Meine 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>

Mein Build-Skript:

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

Answer 1

Leider können Sie nicht mit babel erstellen , da es nur Sprachen transpiliert und keine Module erstellt. Sie benötigen noch eine Art Bundler, um require / importImporte aufzulösen . Wenn Sie keine riesigen, kräftigen Webpack-Konfigurationen möchten, können Sie sich Rollup oder Parcel ansehen

Wenn Sie Sie nur kompilieren möchten typescriptund vue typescriptinstallieren müssen @babel/preset-typescript @babel/preset-env, fügen Sie sie in die .babelrcDatei ein.

Verwenden Sie dann babel ./src/main.ts --out-dir build --extensions ".ts"oder besser noch lokal installiertes Babel./node_modules/.bin/babel ./src/main.ts --out-dir build --extensions ".ts"