babel만으로 typescript vue 앱을 빌드 하시겠습니까?

Question

바벨만으로 typescript vue 앱을 어떻게 트랜스 파일하고 빌드 할 수 있습니까? vue-cli-service를 광범위하게 사용했지만 웹팩이나 아무것도없이 최소한의 설정 만 필요한 지점에 도달했습니다.

내 .babelrc

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

내 package.json 종속성 :

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

내 항목 main.ts 파일 :

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

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

내 빌드 스크립트 :

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

Answer 1

불행히도 바벨로 빌드 할 수 없습니다. 언어 만 변환하고 모듈을 빌드 할 수 없기 때문입니다. require / import가져 오기 를 해결하려면 일부 유형의 번 들러가 필요합니다 . 거대한 웹팩 구성을 원하지 않는 경우 Rollup 또는 Parcel을 볼 수 있습니다.

당신이 실제로 당신을 컴파일하려면 typescript및 vue typescript설치해야 @babel/preset-typescript @babel/preset-env,에 포함 .babelrc파일.

그런 다음 babel ./src/main.ts --out-dir build --extensions ".ts"로컬에 설치된 바벨을 사용 하거나 더 잘 사용하십시오../node_modules/.bin/babel ./src/main.ts --out-dir build --extensions ".ts"