仅使用 babel 构建 typescript vue 应用程序?

Posted

技术标签:

【中文标题】仅使用 babel 构建 typescript vue 应用程序?【英文标题】:Build typescript vue apps with only babel? 【发布时间】:2020-12-14 01:48:14 【问题描述】:

如何仅使用 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');

我的应用程序.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

【问题讨论】:

您是否使用vue-cli3 来创建您的项目? @Tingsen Cheng 实际上是的。 类似问题:***.com/questions/59103389/… 【参考方案1】:

很遗憾,您不能使用 babel 构建,因为它只能转换语言而不能构建模块。您仍然需要某种类型的捆绑器来解析 require / import 导入。如果你不想要庞大的 webpack 配置,可以查看 Rollup 或 Parcel

如果你只想编译typescriptvue 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"

【讨论】:

以上是关于仅使用 babel 构建 typescript vue 应用程序?的主要内容,如果未能解决你的问题,请参考以下文章

@babel/typescript 在 webpack 构建时不会抛出错误

Storybook - 使用自定义 webpack / babel 的 typescript 项目中没有出现任何故事

JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript之间转换

TypeScript 和 Webpack 4,模块构建失败:意外的令牌,预期的“,”

babel ast的初级构建

使用TypeScript和Rollup构建迭代器