只使用Babel构建TypeScript Vue应用程序？

Question

如何仅使用babel来转译和构建我的TypeScript Vue应用程序？我已经广泛使用了vue-cli-service，但到达了一个只需要最小设置而不需要webpack或其他任何东西的点。

我的.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

- Asperger

---

你是否使用 vue-cli3 来创建你的项目？ - Terence Cheng

@Tingsen Cheng 是的，事实上我确实有。 - Asperger

是否有可能在不使用 Vue CLI 的情况下构建 Vue 应用程序？ - yaya

Answer 1

不幸的是，你不能使用babel来构建项目，因为它只能转换语言，而且无法构建模块。你仍然需要一些类型的打包工具来解决require / import引入的问题。如果你不想使用沉重的webpack配置文件，可以考虑使用Rollup或Parcel。

如果你想编译typescript和vue typescript代码，你需要安装@babel/preset-typescript和@babel/preset-env，并将它们包含在.babelrc文件中。

之后使用babel ./src/main.ts --out-dir build --extensions ".ts"命令进行编译，或者更好的方法是使用本地安装的babel./node_modules/.bin/babel ./src/main.ts --out-dir build --extensions ".ts"

- ColdHands