Xây dựng ứng dụng vue typecript chỉ với babel?

Question

Làm cách nào tôi có thể chuyển mã và xây dựng ứng dụng vue sắp chữ của mình chỉ với babel? Tôi đã sử dụng rộng rãi dịch vụ vue-cli-nhưng đã đến thời điểm mà tôi chỉ cần thiết lập tối thiểu, không cần gói web hay bất cứ thứ gì.

.Babelrc của tôi

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

Các phụ thuộc package.json của tôi:

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

Tệp main.ts mục nhập của tôi:

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

Ứng dụng của tôi.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>

Kịch bản xây dựng của tôi:

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

Answer 1

Thật không may, bạn không thể xây dựng bằng babel, vì nó chỉ chuyển đổi ngôn ngữ và không thể xây dựng mô-đun. Bạn sẽ vẫn cần một số loại gói để giải quyết require / importviệc nhập. Nếu bạn không muốn cấu hình webpack khổng lồ, bạn có thể xem Rollup hoặc Parcel

Nếu bạn thực sự chỉ muốn biên dịch typescriptvà vue typescriptbạn cần cài đặt @babel/preset-typescript @babel/preset-env, hãy đưa chúng vào .babelrctệp.

Sau đó sử dụng babel ./src/main.ts --out-dir build --extensions ".ts"hoặc tốt hơn là sử dụng babel được cài đặt cục bộ./node_modules/.bin/babel ./src/main.ts --out-dir build --extensions ".ts"